@solid-design-system/components 4.0.6 → 4.0.8

package/dist/custom-elements.json

@@ -1569,197 +1569,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/brandshape/brandshape.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdBrandshape",
-          "cssParts": [
-            {
-              "description": "The component's base wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "Middle content wrapper.",
-              "name": "content"
-            },
-            {
-              "description": "Top shape.",
-              "name": "shape-top"
-            },
-            {
-              "description": "Middle shape.",
-              "name": "shape-middle"
-            },
-            {
-              "description": "Bottom shape.",
-              "name": "shape-bottom"
-            },
-            {
-              "description": "Container for border and image variant.",
-              "name": "stylized-container"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The content inside the brandshape.",
-              "name": ""
-            },
-            {
-              "description": "The image slot for the 'image' variant.",
-              "name": "image"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
-              },
-              "default": "'primary'",
-              "description": "The brandshape's theme variant.",
-              "attribute": "variant"
-            },
-            {
-              "kind": "field",
-              "name": "shapes",
-              "type": {
-                "text": "('top' | 'middle' | 'bottom')[]"
-              },
-              "default": "['top', 'middle', 'bottom']",
-              "description": "Defines which shapes of the brandshape should be displayed.",
-              "attribute": "shapes"
-            },
-            {
-              "kind": "field",
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "attribute": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "The element's language.",
-              "attribute": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "CustomEventInit"
-                  }
-                }
-              ],
-              "description": "Emits a custom event with more convenient defaults.",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
-              },
-              "default": "'primary'",
-              "description": "The brandshape's theme variant.",
-              "fieldName": "variant"
-            },
-            {
-              "name": "shapes",
-              "type": {
-                "text": "('top' | 'middle' | 'bottom')[]"
-              },
-              "default": "['top', 'middle', 'bottom']",
-              "description": "Defines which shapes of the brandshape should be displayed.",
-              "fieldName": "shapes"
-            },
-            {
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "fieldName": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            },
-            {
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "The element's language.",
-              "fieldName": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "SolidElement",
-            "module": "/src/internal/solid-element"
-          },
-          "summary": "The Brandshape highlights a piece of content.",
-          "documentation": "https://solid.union-investment.com/[storybook-brandshape]/brandshape",
-          "status": "stable",
-          "since": "1.4",
-          "tagName": "sd-brandshape",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SdBrandshape",
-            "module": "components/brandshape/brandshape.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sd-brandshape",
-          "declaration": {
-            "name": "SdBrandshape",
-            "module": "components/brandshape/brandshape.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/button/button.js",
@@ -2327,42 +2136,68 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/button-group/button-group.js",
+      "path": "components/brandshape/brandshape.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdButtonGroup",
+          "name": "SdBrandshape",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            },
+            {
+              "description": "Middle content wrapper.",
+              "name": "content"
+            },
+            {
+              "description": "Top shape.",
+              "name": "shape-top"
+            },
+            {
+              "description": "Middle shape.",
+              "name": "shape-middle"
+            },
+            {
+              "description": "Bottom shape.",
+              "name": "shape-bottom"
+            },
+            {
+              "description": "Container for border and image variant.",
+              "name": "stylized-container"
             }
           ],
           "slots": [
             {
-              "description": "One or more `<sd-button>` elements to display in the button group.",
+              "description": "The content inside the brandshape.",
               "name": ""
+            },
+            {
+              "description": "The image slot for the 'image' variant.",
+              "name": "image"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "disableRole",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
               },
-              "default": "false"
+              "default": "'primary'",
+              "description": "The brandshape's theme variant.",
+              "attribute": "variant"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "shapes",
               "type": {
-                "text": "string"
+                "text": "('top' | 'middle' | 'bottom')[]"
               },
-              "default": "''",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "attribute": "label"
+              "default": "['top', 'middle', 'bottom']",
+              "description": "Defines which shapes of the brandshape should be displayed.",
+              "attribute": "shapes"
             },
             {
               "kind": "field",
@@ -2417,22 +2252,187 @@
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "| 'neutral-100'\n    | 'primary'\n    | 'white'\n    | 'border-primary'\n    | 'border-white'\n    | 'image'"
               },
-              "default": "''",
-              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
-              "fieldName": "label"
+              "default": "'primary'",
+              "description": "The brandshape's theme variant.",
+              "fieldName": "variant"
             },
             {
-              "name": "dir",
+              "name": "shapes",
               "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
+                "text": "('top' | 'middle' | 'bottom')[]"
               },
-              "description": "The element's directionality.",
-              "fieldName": "dir",
-              "inheritedFrom": {
+              "default": "['top', 'middle', 'bottom']",
+              "description": "Defines which shapes of the brandshape should be displayed.",
+              "fieldName": "shapes"
+            },
+            {
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "fieldName": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SolidElement",
+            "module": "/src/internal/solid-element"
+          },
+          "summary": "The Brandshape highlights a piece of content.",
+          "documentation": "https://solid.union-investment.com/[storybook-brandshape]/brandshape",
+          "status": "stable",
+          "since": "1.4",
+          "tagName": "sd-brandshape",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdBrandshape",
+            "module": "components/brandshape/brandshape.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sd-brandshape",
+          "declaration": {
+            "name": "SdBrandshape",
+            "module": "components/brandshape/brandshape.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/button-group/button-group.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdButtonGroup",
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "One or more `<sd-button>` elements to display in the button group.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "disableRole",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "attribute": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "attribute": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "CustomEventInit"
+                  }
+                }
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\ndevices when interacting with the control and is strongly recommended.",
+              "fieldName": "label"
+            },
+            {
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "fieldName": "dir",
+              "inheritedFrom": {
                 "name": "SolidElement",
                 "module": "src/internal/solid-element.ts"
               }
@@ -5593,67 +5593,50 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/expandable/expandable.js",
+      "path": "components/dropdown/dropdown.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdExpandable",
-          "cssProperties": [
-            {
-              "description": "Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0))",
-              "name": "--gradient-color-start"
-            },
-            {
-              "description": "End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1))",
-              "name": "--gradient-color-end"
-            },
-            {
-              "description": "Height of the gradient (default: 24px)",
-              "name": "--gradient-height"
-            },
-            {
-              "description": "Different value for initial visible block (default: 90px)",
-              "name": "--component-expandable-max-block-size"
-            }
-          ],
+          "name": "SdDropdown",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The content of the expandable.",
-              "name": "content"
-            },
-            {
-              "description": "The toggle button of the expandable.",
-              "name": "toggle"
-            },
-            {
-              "description": "The summary of the expandable.",
-              "name": "summary"
+              "description": "The container that wraps the trigger.",
+              "name": "trigger"
             },
             {
-              "description": "The details element of the expandable.",
-              "name": "details"
+              "description": "The panel that gets shown when the dropdown is open.",
+              "name": "panel"
             }
           ],
           "slots": [
             {
-              "description": "Content of the expandable",
+              "description": "The dropdown's main content.",
               "name": ""
             },
             {
-              "description": "Content of the toggle button when the expandable is open",
-              "name": "toggle-open"
-            },
-            {
-              "description": "Content of the toggle button when the expandable is closed",
-              "name": "toggle-closed"
+              "description": "The dropdown's trigger, usually a `<sd-button>` element.",
+              "name": "trigger"
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "popup",
+              "type": {
+                "text": "SdPopup"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
+            },
             {
               "kind": "field",
               "name": "open",
@@ -5661,36 +5644,130 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Used to check whether the component is expanded or not.",
+              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
               "attribute": "open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "inverted",
+              "name": "rounded",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Inverts the expandable and sets the color of the gradient to primary.",
-              "attribute": "inverted",
+              "description": "Indicates whether or not the dropdown should be styled with rounded corners.",
+              "attribute": "rounded",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "description": "Opens the expandable"
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'bottom-start'",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "hide",
-              "description": "Closes the expandable"
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the dropdown so the panel will not open.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "stayOpenOnSelect",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+              "attribute": "stay-open-on-select",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
+              "attribute": "distance"
+            },
+            {
+              "kind": "field",
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "attribute": "skidding"
+            },
+            {
+              "kind": "field",
+              "name": "noAutoSize",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the dropdown should automatically resize its content's width/height regarding the available space on screen.",
+              "attribute": "no-auto-size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "noFlip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set to true, the placement of the dropdown will not flip to the opposite site to keep it in view.",
+              "attribute": "no-flip",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "attribute": "hoist"
+            },
+            {
+              "kind": "method",
+              "name": "getAccessibleTrigger",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              },
+              "description": "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.\""
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the dropdown panel."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the dropdown panel"
+            },
+            {
+              "kind": "method",
+              "name": "reposition",
+              "description": "Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated."
             },
             {
               "kind": "field",
@@ -5745,19 +5822,19 @@
           ],
           "events": [
             {
-              "description": "Emitted when the expandable opens.",
+              "description": "Emitted when the dropdown opens.",
               "name": "sd-show"
             },
             {
-              "description": "Emitted after the expandable opens and all animations are complete.",
+              "description": "Emitted after the dropdown opens and all animations are complete.",
               "name": "sd-after-show"
             },
             {
-              "description": "Emitted when the expandable closes.",
+              "description": "Emitted when the dropdown closes.",
               "name": "sd-hide"
             },
             {
-              "description": "Emitted after the expandable closes and all animations are complete.",
+              "description": "Emitted after the dropdown closes and all animations are complete.",
               "name": "sd-after-hide"
             }
           ],
@@ -5768,17 +5845,89 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Used to check whether the component is expanded or not.",
+              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
               "fieldName": "open"
             },
             {
-              "name": "inverted",
+              "name": "rounded",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Inverts the expandable and sets the color of the gradient to primary.",
-              "fieldName": "inverted"
+              "description": "Indicates whether or not the dropdown should be styled with rounded corners.",
+              "fieldName": "rounded"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+              },
+              "default": "'bottom-start'",
+              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the dropdown so the panel will not open.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "stay-open-on-select",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
+              "fieldName": "stayOpenOnSelect"
+            },
+            {
+              "name": "distance",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
+              "fieldName": "distance"
+            },
+            {
+              "name": "skidding",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "The distance in pixels from which to offset the panel along its trigger.",
+              "fieldName": "skidding"
+            },
+            {
+              "name": "no-auto-size",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the dropdown should automatically resize its content's width/height regarding the available space on screen.",
+              "fieldName": "noAutoSize"
+            },
+            {
+              "name": "no-flip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "When set to true, the placement of the dropdown will not flip to the opposite site to keep it in view.",
+              "fieldName": "noFlip"
+            },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
+              "fieldName": "hoist"
             },
             {
               "name": "dir",
@@ -5809,14 +5958,24 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Expandable shows a brief summary and expands to show additional content.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/expandable",
+          "summary": "Dropdowns expose additional content that \"drops down\" in a panel.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/dropdown",
           "status": "stable",
-          "since": "3.11.0",
+          "since": "1.8",
           "dependencies": [
-            "sd-icon"
+            "sd-popup"
           ],
-          "tagName": "sd-expandable",
+          "animations": [
+            {
+              "name": "dropdown.show",
+              "description": "The animation to use when showing the dropdown."
+            },
+            {
+              "name": "dropdown.hide",
+              "description": "The animation to use when hiding the dropdown."
+            }
+          ],
+          "tagName": "sd-dropdown",
           "customElement": true
         }
       ],
@@ -5825,36 +5984,44 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdExpandable",
-            "module": "components/expandable/expandable.js"
+            "name": "SdDropdown",
+            "module": "components/dropdown/dropdown.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-expandable",
+          "name": "sd-dropdown",
           "declaration": {
-            "name": "SdExpandable",
-            "module": "components/expandable/expandable.js"
+            "name": "SdDropdown",
+            "module": "components/dropdown/dropdown.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/flipcard/flipcard.js",
+      "path": "components/expandable/expandable.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdFlipcard",
+          "name": "SdExpandable",
           "cssProperties": [
             {
-              "description": "Description of the flipcard.",
-              "name": "--name"
+              "description": "Start color of the gradient. Set the opacity to 0 (default: rgba(255, 255, 255, 0))",
+              "name": "--gradient-color-start"
             },
             {
-              "description": "Use this property to set the height of the flipcard.",
-              "name": "--height"
+              "description": "End color of the gradient. Set the opacity to 1 (default: rgba(255, 255, 255, 1))",
+              "name": "--gradient-color-end"
+            },
+            {
+              "description": "Height of the gradient (default: 24px)",
+              "name": "--gradient-height"
+            },
+            {
+              "description": "Different value for initial visible block (default: 90px)",
+              "name": "--component-expandable-max-block-size"
             }
           ],
           "cssParts": [
@@ -5863,23 +6030,263 @@
               "name": "base"
             },
             {
-              "description": "The container that wraps the front-side of the flipcard.",
-              "name": "front"
+              "description": "The content of the expandable.",
+              "name": "content"
             },
             {
-              "description": "The container that wraps the back-side of the flipcard.",
-              "name": "back"
+              "description": "The toggle button of the expandable.",
+              "name": "toggle"
             },
             {
-              "description": "The button that flips the flipcard to the back.",
-              "name": "front-button"
+              "description": "The summary of the expandable.",
+              "name": "summary"
             },
             {
-              "description": "The button that flips the flipcard to the front.",
-              "name": "back-button"
-            },
+              "description": "The details element of the expandable.",
+              "name": "details"
+            }
+          ],
+          "slots": [
             {
-              "description": "The container that wraps the front side and the flip button.",
+              "description": "Content of the expandable",
+              "name": ""
+            },
+            {
+              "description": "Content of the toggle button when the expandable is open",
+              "name": "toggle-open"
+            },
+            {
+              "description": "Content of the toggle button when the expandable is closed",
+              "name": "toggle-closed"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used to check whether the component is expanded or not.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Inverts the expandable and sets the color of the gradient to primary.",
+              "attribute": "inverted",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Opens the expandable"
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Closes the expandable"
+            },
+            {
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "attribute": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "attribute": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "CustomEventInit"
+                  }
+                }
+              ],
+              "description": "Emits a custom event with more convenient defaults.",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            }
+          ],
+          "events": [
+            {
+              "description": "Emitted when the expandable opens.",
+              "name": "sd-show"
+            },
+            {
+              "description": "Emitted after the expandable opens and all animations are complete.",
+              "name": "sd-after-show"
+            },
+            {
+              "description": "Emitted when the expandable closes.",
+              "name": "sd-hide"
+            },
+            {
+              "description": "Emitted after the expandable closes and all animations are complete.",
+              "name": "sd-after-hide"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Used to check whether the component is expanded or not.",
+              "fieldName": "open"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Inverts the expandable and sets the color of the gradient to primary.",
+              "fieldName": "inverted"
+            },
+            {
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "fieldName": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
+            },
+            {
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "fieldName": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "SolidElement",
+            "module": "/src/internal/solid-element"
+          },
+          "summary": "Expandable shows a brief summary and expands to show additional content.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/expandable",
+          "status": "stable",
+          "since": "3.11.0",
+          "dependencies": [
+            "sd-icon"
+          ],
+          "tagName": "sd-expandable",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "SdExpandable",
+            "module": "components/expandable/expandable.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "sd-expandable",
+          "declaration": {
+            "name": "SdExpandable",
+            "module": "components/expandable/expandable.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/flipcard/flipcard.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "SdFlipcard",
+          "cssProperties": [
+            {
+              "description": "Description of the flipcard.",
+              "name": "--name"
+            },
+            {
+              "description": "Use this property to set the height of the flipcard.",
+              "name": "--height"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's base wrapper.",
+              "name": "base"
+            },
+            {
+              "description": "The container that wraps the front-side of the flipcard.",
+              "name": "front"
+            },
+            {
+              "description": "The container that wraps the back-side of the flipcard.",
+              "name": "back"
+            },
+            {
+              "description": "The button that flips the flipcard to the back.",
+              "name": "front-button"
+            },
+            {
+              "description": "The button that flips the flipcard to the front.",
+              "name": "back-button"
+            },
+            {
+              "description": "The container that wraps the front side and the flip button.",
               "name": "front-interactive-container"
             },
             {
@@ -13861,181 +14268,89 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/dropdown/dropdown.js",
+      "path": "components/tab-group/tab-group.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdDropdown",
+          "name": "SdTabGroup",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
             },
             {
-              "description": "The container that wraps the trigger.",
-              "name": "trigger"
+              "description": "The tab group's navigation container where tabs are slotted in.",
+              "name": "nav"
             },
             {
-              "description": "The panel that gets shown when the dropdown is open.",
-              "name": "panel"
-            }
-          ],
-          "slots": [
+              "description": "The container that wraps the tabs and active-tab-indicator.",
+              "name": "scroll-container"
+            },
             {
-              "description": "The dropdown's main content.",
-              "name": ""
-            },
-            {
-              "description": "The dropdown's trigger, usually a `<sd-button>` element.",
-              "name": "trigger"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "popup",
-              "type": {
-                "text": "SdPopup"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
-              "attribute": "open",
-              "reflects": true
+              "description": "The container that wraps the tabs.",
+              "name": "tabs"
             },
             {
-              "kind": "field",
-              "name": "rounded",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the dropdown should be styled with rounded corners.",
-              "attribute": "rounded",
-              "reflects": true
+              "description": "The line that separates tabs from panels.",
+              "name": "separation"
             },
             {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
-              },
-              "default": "'bottom-start'",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "attribute": "placement",
-              "reflects": true
+              "description": "The tab group's body where tab panels are slotted in.",
+              "name": "body"
             },
             {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the dropdown so the panel will not open.",
-              "attribute": "disabled",
-              "reflects": true
+              "description": "The starting scroll button.",
+              "name": "scroll-button--start"
             },
             {
-              "kind": "field",
-              "name": "stayOpenOnSelect",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
-              "attribute": "stay-open-on-select",
-              "reflects": true
+              "description": "The ending scroll button.",
+              "name": "scroll-button--end"
             },
             {
-              "kind": "field",
-              "name": "distance",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
-              "attribute": "distance"
-            },
+              "description": "The scroll button's exported `base` part.",
+              "name": "scroll-button__base"
+            }
+          ],
+          "slots": [
             {
-              "kind": "field",
-              "name": "skidding",
-              "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "attribute": "skidding"
+              "description": "Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.",
+              "name": ""
             },
             {
-              "kind": "field",
-              "name": "noAutoSize",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the dropdown should automatically resize its content's width/height regarding the available space on screen.",
-              "attribute": "no-auto-size",
-              "reflects": true
-            },
+              "description": "Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.",
+              "name": "nav"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "noFlip",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When set to true, the placement of the dropdown will not flip to the opposite site to keep it in view.",
-              "attribute": "no-flip",
-              "reflects": true
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
             },
             {
               "kind": "field",
-              "name": "hoist",
+              "name": "activation",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "attribute": "hoist"
-            },
-            {
-              "kind": "method",
-              "name": "getAccessibleTrigger",
-              "return": {
-                "type": {
-                  "text": "HTMLElement | null"
-                }
+                "text": "'auto' | 'manual'"
               },
-              "description": "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.\""
+              "default": "'auto'",
+              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+              "attribute": "activation"
             },
             {
               "kind": "method",
               "name": "show",
-              "description": "Shows the dropdown panel."
-            },
-            {
-              "kind": "method",
-              "name": "hide",
-              "description": "Hides the dropdown panel"
-            },
-            {
-              "kind": "method",
-              "name": "reposition",
-              "description": "Instructs the dropdown menu to reposition. Useful when the position or size of the trigger changes when the menu\nis activated."
+              "parameters": [
+                {
+                  "name": "panel",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Shows the specified tab panel."
             },
             {
               "kind": "field",
@@ -14090,129 +14405,46 @@
           ],
           "events": [
             {
-              "description": "Emitted when the dropdown opens.",
-              "name": "sd-show"
-            },
-            {
-              "description": "Emitted after the dropdown opens and all animations are complete.",
-              "name": "sd-after-show"
-            },
-            {
-              "description": "Emitted when the dropdown closes.",
-              "name": "sd-hide"
-            },
-            {
-              "description": "Emitted after the dropdown closes and all animations are complete.",
-              "name": "sd-after-hide"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the dropdown is open. You can toggle this attribute to show and hide the dropdown, or you\ncan use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.",
-              "fieldName": "open"
-            },
-            {
-              "name": "rounded",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the dropdown should be styled with rounded corners.",
-              "fieldName": "rounded"
-            },
-            {
-              "name": "placement",
               "type": {
-                "text": "| 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'"
+                "text": "{ name: String }"
               },
-              "default": "'bottom-start'",
-              "description": "The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel\ninside of the viewport.",
-              "fieldName": "placement"
+              "description": "Emitted when a tab is shown.",
+              "name": "sd-tab-show"
             },
             {
-              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "{ name: String }"
               },
-              "default": "false",
-              "description": "Disables the dropdown so the panel will not open.",
-              "fieldName": "disabled"
-            },
+              "description": "Emitted when a tab is hidden.",
+              "name": "sd-tab-hide"
+            }
+          ],
+          "attributes": [
             {
-              "name": "stay-open-on-select",
+              "name": "activation",
               "type": {
-                "text": "boolean"
+                "text": "'auto' | 'manual'"
               },
-              "default": "false",
-              "description": "By default, the dropdown is closed when an item is selected. This attribute will keep it open instead. Useful for\ndropdowns that allow for multiple interactions.",
-              "fieldName": "stayOpenOnSelect"
+              "default": "'auto'",
+              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
+              "fieldName": "activation"
             },
             {
-              "name": "distance",
+              "name": "dir",
               "type": {
-                "text": "number"
+                "text": "'ltr' | 'rtl' | 'auto'"
               },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel away from its trigger. This defaults to `0` for `rounded=false` and to a minimum of `1` for `rounded=true`.",
-              "fieldName": "distance"
+              "description": "The element's directionality.",
+              "fieldName": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "src/internal/solid-element.ts"
+              }
             },
             {
-              "name": "skidding",
+              "name": "lang",
               "type": {
-                "text": "number"
-              },
-              "default": "0",
-              "description": "The distance in pixels from which to offset the panel along its trigger.",
-              "fieldName": "skidding"
-            },
-            {
-              "name": "no-auto-size",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the dropdown should automatically resize its content's width/height regarding the available space on screen.",
-              "fieldName": "noAutoSize"
-            },
-            {
-              "name": "no-flip",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "When set to true, the placement of the dropdown will not flip to the opposite site to keep it in view.",
-              "fieldName": "noFlip"
-            },
-            {
-              "name": "hoist",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Enable this option to prevent the panel from being clipped when the component is placed inside a container with\n`overflow: auto|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.",
-              "fieldName": "hoist"
-            },
-            {
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "fieldName": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            },
-            {
-              "name": "lang",
-              "type": {
-                "text": "string"
+                "text": "string"
               },
               "description": "The element's language.",
               "fieldName": "lang",
@@ -14226,24 +14458,11 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Dropdowns expose additional content that \"drops down\" in a panel.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/dropdown",
+          "summary": "Tab groups organize content into a container that shows one section at a time.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/tab-group",
           "status": "stable",
-          "since": "1.8",
-          "dependencies": [
-            "sd-popup"
-          ],
-          "animations": [
-            {
-              "name": "dropdown.show",
-              "description": "The animation to use when showing the dropdown."
-            },
-            {
-              "name": "dropdown.hide",
-              "description": "The animation to use when hiding the dropdown."
-            }
-          ],
-          "tagName": "sd-dropdown",
+          "since": "2.6.0",
+          "tagName": "sd-tab-group",
           "customElement": true
         }
       ],
@@ -14252,105 +14471,68 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdDropdown",
-            "module": "components/dropdown/dropdown.js"
+            "name": "SdTabGroup",
+            "module": "components/tab-group/tab-group.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-dropdown",
+          "name": "sd-tab-group",
           "declaration": {
-            "name": "SdDropdown",
-            "module": "components/dropdown/dropdown.js"
+            "name": "SdTabGroup",
+            "module": "components/tab-group/tab-group.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/tab-group/tab-group.js",
+      "path": "components/tab-panel/tab-panel.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdTabGroup",
+          "name": "SdTabPanel",
+          "cssProperties": [
+            {
+              "description": "The tab panel's padding.",
+              "name": "--padding"
+            }
+          ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
-            },
-            {
-              "description": "The tab group's navigation container where tabs are slotted in.",
-              "name": "nav"
-            },
-            {
-              "description": "The container that wraps the tabs and active-tab-indicator.",
-              "name": "scroll-container"
-            },
-            {
-              "description": "The container that wraps the tabs.",
-              "name": "tabs"
-            },
-            {
-              "description": "The line that separates tabs from panels.",
-              "name": "separation"
-            },
-            {
-              "description": "The tab group's body where tab panels are slotted in.",
-              "name": "body"
-            },
-            {
-              "description": "The starting scroll button.",
-              "name": "scroll-button--start"
-            },
-            {
-              "description": "The ending scroll button.",
-              "name": "scroll-button--end"
-            },
-            {
-              "description": "The scroll button's exported `base` part.",
-              "name": "scroll-button__base"
             }
           ],
           "slots": [
             {
-              "description": "Used for grouping tab panels in the tab group. Must be `<sd-tab-panel>` elements.",
+              "description": "The tab panel's content.",
               "name": ""
-            },
-            {
-              "description": "Used for grouping tabs in the tab group. Must be `<sd-tab>` elements.",
-              "name": "nav"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)"
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tab panel's name.",
+              "attribute": "name",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "activation",
+              "name": "active",
               "type": {
-                "text": "'auto' | 'manual'"
+                "text": "boolean"
               },
-              "default": "'auto'",
-              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-              "attribute": "activation"
-            },
-            {
-              "kind": "method",
-              "name": "show",
-              "parameters": [
-                {
-                  "name": "panel",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Shows the specified tab panel."
+              "default": "false",
+              "description": "When true, the tab panel will be shown.",
+              "attribute": "active",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -14403,31 +14585,24 @@
               }
             }
           ],
-          "events": [
+          "attributes": [
             {
+              "name": "name",
               "type": {
-                "text": "{ name: String }"
+                "text": "string"
               },
-              "description": "Emitted when a tab is shown.",
-              "name": "sd-tab-show"
+              "default": "''",
+              "description": "The tab panel's name.",
+              "fieldName": "name"
             },
             {
+              "name": "active",
               "type": {
-                "text": "{ name: String }"
-              },
-              "description": "Emitted when a tab is hidden.",
-              "name": "sd-tab-hide"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "activation",
-              "type": {
-                "text": "'auto' | 'manual'"
+                "text": "boolean"
               },
-              "default": "'auto'",
-              "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
-              "fieldName": "activation"
+              "default": "false",
+              "description": "When true, the tab panel will be shown.",
+              "fieldName": "active"
             },
             {
               "name": "dir",
@@ -14458,11 +14633,11 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Tab groups organize content into a container that shows one section at a time.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/tab-group",
+          "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/tab-panel",
           "status": "stable",
           "since": "2.6.0",
-          "tagName": "sd-tab-group",
+          "tagName": "sd-tab-panel",
           "customElement": true
         }
       ],
@@ -14471,67 +14646,114 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdTabGroup",
-            "module": "components/tab-group/tab-group.js"
+            "name": "SdTabPanel",
+            "module": "components/tab-panel/tab-panel.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-tab-group",
+          "name": "sd-tab-panel",
           "declaration": {
-            "name": "SdTabGroup",
-            "module": "components/tab-group/tab-group.js"
+            "name": "SdTabPanel",
+            "module": "components/tab-panel/tab-panel.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/tab-panel/tab-panel.js",
+      "path": "components/teaser/teaser.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdTabPanel",
+          "name": "SdTeaser",
           "cssProperties": [
             {
-              "description": "The tab panel's padding.",
-              "name": "--padding"
+              "description": "The distribution ratio of the media.",
+              "name": "--distribution-media"
+            },
+            {
+              "description": "The distribution ratio of the content.",
+              "name": "--distribution-content"
             }
           ],
           "cssParts": [
             {
               "description": "The component's base wrapper.",
               "name": "base"
+            },
+            {
+              "description": "The container that wraps the media.",
+              "name": "media"
+            },
+            {
+              "description": "The container that wraps the content.",
+              "name": "content"
+            },
+            {
+              "description": " The container that wraps the meta.",
+              "name": "meta"
+            },
+            {
+              "description": "The container that wraps the headline.",
+              "name": "headline"
+            },
+            {
+              "description": "The container that wraps the main content.",
+              "name": "main"
             }
           ],
           "slots": [
             {
-              "description": "The tab panel's content.",
+              "description": "An optional main content slot.",
               "name": ""
+            },
+            {
+              "description": "An optional media slot.",
+              "name": "media"
+            },
+            {
+              "description": "An optional meta slot.",
+              "name": "meta"
+            },
+            {
+              "description": "headline slot.",
+              "name": "headline"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "name",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'"
               },
-              "default": "''",
-              "description": "The tab panel's name.",
-              "attribute": "name",
-              "reflects": true
-            },
+              "default": "'white'",
+              "description": "Variant of the teaser",
+              "attribute": "variant",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "active",
+              "name": "breakpoint",
+              "type": {
+                "text": "number"
+              },
+              "default": "448",
+              "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+              "attribute": "breakpoint",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "inset",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, the tab panel will be shown.",
-              "attribute": "active",
+              "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
+              "attribute": "inset",
               "reflects": true
             },
             {
@@ -14587,22 +14809,31 @@
           ],
           "attributes": [
             {
-              "name": "name",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'"
               },
-              "default": "''",
-              "description": "The tab panel's name.",
-              "fieldName": "name"
+              "default": "'white'",
+              "description": "Variant of the teaser",
+              "fieldName": "variant"
             },
             {
-              "name": "active",
+              "name": "breakpoint",
+              "type": {
+                "text": "number"
+              },
+              "default": "448",
+              "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
+              "fieldName": "breakpoint"
+            },
+            {
+              "name": "inset",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, the tab panel will be shown.",
-              "fieldName": "active"
+              "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
+              "fieldName": "inset"
             },
             {
               "name": "dir",
@@ -14633,11 +14864,11 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/tab-panel",
+          "summary": "Teasers group information into flexible containers so users can browse a collection of related items and actions.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/teaser",
           "status": "stable",
-          "since": "2.6.0",
-          "tagName": "sd-tab-panel",
+          "since": "1.3",
+          "tagName": "sd-teaser",
           "customElement": true
         }
       ],
@@ -14646,16 +14877,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdTabPanel",
-            "module": "components/tab-panel/tab-panel.js"
+            "name": "SdTeaser",
+            "module": "components/teaser/teaser.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-tab-panel",
+          "name": "sd-teaser",
           "declaration": {
-            "name": "SdTabPanel",
-            "module": "components/tab-panel/tab-panel.js"
+            "name": "SdTeaser",
+            "module": "components/teaser/teaser.js"
           }
         }
       ]
@@ -14994,22 +15225,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/teaser/teaser.js",
+      "path": "components/teaser-media/teaser-media.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdTeaser",
-          "cssProperties": [
-            {
-              "description": "The distribution ratio of the media.",
-              "name": "--distribution-media"
-            },
-            {
-              "description": "The distribution ratio of the content.",
-              "name": "--distribution-content"
-            }
-          ],
+          "name": "SdTeaserMedia",
           "cssParts": [
             {
               "description": "The component's base wrapper.",
@@ -15031,6 +15252,10 @@
               "description": "The container that wraps the headline.",
               "name": "headline"
             },
+            {
+              "description": "The container that wraps the expandable.",
+              "name": "expandable"
+            },
             {
               "description": "The container that wraps the main content.",
               "name": "main"
@@ -15049,6 +15274,10 @@
               "description": "An optional meta slot.",
               "name": "meta"
             },
+            {
+              "description": "An optional expandable slot, <strong>not</strong> shown on small devices.",
+              "name": "expandable"
+            },
             {
               "description": "headline slot.",
               "name": "headline"
@@ -15059,35 +15288,13 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'"
+                "text": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'"
               },
               "default": "'white'",
               "description": "Variant of the teaser",
               "attribute": "variant",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "breakpoint",
-              "type": {
-                "text": "number"
-              },
-              "default": "448",
-              "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
-              "attribute": "breakpoint",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "inset",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
-              "attribute": "inset",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "dir",
@@ -15143,30 +15350,12 @@
             {
               "name": "variant",
               "type": {
-                "text": "| 'white'\n    | 'white border-neutral-400'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'"
+                "text": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'"
               },
               "default": "'white'",
               "description": "Variant of the teaser",
               "fieldName": "variant"
             },
-            {
-              "name": "breakpoint",
-              "type": {
-                "text": "number"
-              },
-              "default": "448",
-              "description": "Breakpoint where the teaser switches from `vertical` to `horizontal`. `0` is always `horizontal`, `9999` is always `vertical`.",
-              "fieldName": "breakpoint"
-            },
-            {
-              "name": "inset",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "The teaser's inner padding. This is always set in `white border-neutral-400`.",
-              "fieldName": "inset"
-            },
             {
               "name": "dir",
               "type": {
@@ -15197,10 +15386,10 @@
             "module": "/src/internal/solid-element"
           },
           "summary": "Teasers group information into flexible containers so users can browse a collection of related items and actions.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/teaser",
+          "documentation": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-teaser-media--docs",
           "status": "stable",
-          "since": "1.3",
-          "tagName": "sd-teaser",
+          "since": "2.4.0",
+          "tagName": "sd-teaser-media",
           "customElement": true
         }
       ],
@@ -15209,132 +15398,211 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdTeaser",
-            "module": "components/teaser/teaser.js"
+            "name": "SdTeaserMedia",
+            "module": "components/teaser-media/teaser-media.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-teaser",
+          "name": "sd-teaser-media",
           "declaration": {
-            "name": "SdTeaser",
-            "module": "components/teaser/teaser.js"
+            "name": "SdTeaserMedia",
+            "module": "components/teaser-media/teaser-media.js"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "components/teaser-media/teaser-media.js",
+      "path": "components/tooltip/tooltip.js",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "SdTeaserMedia",
-          "cssParts": [
+          "name": "SdTooltip",
+          "cssProperties": [
             {
-              "description": "The component's base wrapper.",
-              "name": "base"
+              "description": "The maximum width of the tooltip before its content will wrap.",
+              "name": "--max-width"
             },
             {
-              "description": "The container that wraps the media.",
-              "name": "media"
+              "description": "The amount of time to wait before hiding the tooltip when hovering.",
+              "name": "--hide-delay"
             },
             {
-              "description": "The container that wraps the content.",
-              "name": "content"
-            },
+              "description": "The amount of time to wait before showing the tooltip when hovering.",
+              "name": "--show-delay"
+            }
+          ],
+          "cssParts": [
             {
-              "description": " The container that wraps the meta.",
-              "name": "meta"
+              "description": "The component's base wrapper, an `<sd-popup>` element.",
+              "name": "base"
             },
             {
-              "description": "The container that wraps the headline.",
-              "name": "headline"
+              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
+              "name": "base__popup"
             },
             {
-              "description": "The container that wraps the expandable.",
-              "name": "expandable"
+              "description": "The popup's exported `arrow` part. Use this to target the tooltip's arrow.",
+              "name": "base__arrow"
             },
             {
-              "description": "The container that wraps the main content.",
-              "name": "main"
+              "description": "The tooltip's body where its content is rendered.",
+              "name": "body"
             }
           ],
           "slots": [
             {
-              "description": "An optional main content slot.",
+              "description": "The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.",
               "name": ""
             },
             {
-              "description": "An optional media slot.",
-              "name": "media"
-            },
-            {
-              "description": "An optional meta slot.",
-              "name": "meta"
-            },
-            {
-              "description": "An optional expandable slot, <strong>not</strong> shown on small devices.",
-              "name": "expandable"
+              "description": "Slot to change the default trigger icon. The default icon is an info circle.",
+              "name": "anchor"
             },
             {
-              "description": "headline slot.",
-              "name": "headline"
+              "description": "The content to render in the tooltip. Alternatively, you can use the `content` attribute.",
+              "name": "content"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "localize",
+              "privacy": "public",
+              "default": "new LocalizeController(this)"
+            },
+            {
+              "kind": "field",
+              "name": "popup",
               "type": {
-                "text": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'"
-              },
-              "default": "'white'",
-              "description": "Variant of the teaser",
-              "attribute": "variant",
-              "reflects": true
+                "text": "SdPopup"
+              }
             },
             {
               "kind": "field",
-              "name": "dir",
+              "name": "size",
               "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
+                "text": "'lg' | 'sm'"
               },
-              "description": "The element's directionality.",
-              "attribute": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
+              "default": "'lg'",
+              "description": "Sets the size of the default trigger icon.",
+              "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "lang",
+              "name": "content",
               "type": {
                 "text": "string"
               },
-              "description": "The element's language.",
-              "attribute": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
+              "default": "''",
+              "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
+              "attribute": "content"
             },
             {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'"
+              },
+              "default": "'top'",
+              "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
+              "attribute": "placement",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the tooltip so it won't show when triggered.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
+              "attribute": "open",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "trigger",
+              "type": {
+                "text": "string"
+              },
+              "default": "'click focus'",
+              "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
+              "attribute": "trigger"
+            },
+            {
+              "kind": "field",
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+              "attribute": "hoist"
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "description": "Shows the tooltip."
+            },
+            {
+              "kind": "method",
+              "name": "hide",
+              "description": "Hides the tooltip"
+            },
+            {
+              "kind": "field",
+              "name": "dir",
+              "type": {
+                "text": "'ltr' | 'rtl' | 'auto'"
+              },
+              "description": "The element's directionality.",
+              "attribute": "dir",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "lang",
+              "type": {
+                "text": "string"
+              },
+              "description": "The element's language.",
+              "attribute": "lang",
+              "inheritedFrom": {
+                "name": "SolidElement",
+                "module": "internal/solid-element.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "emit",
+              "parameters": [
+                {
+                  "name": "name",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
                     "text": "CustomEventInit"
                   }
                 }
@@ -15346,15 +15614,87 @@
               }
             }
           ],
+          "events": [
+            {
+              "description": "Emitted when the tooltip begins to show.",
+              "name": "sd-show"
+            },
+            {
+              "description": "Emitted after the tooltip has shown and all animations are complete.",
+              "name": "sd-after-show"
+            },
+            {
+              "description": "Emitted when the tooltip begins to hide.",
+              "name": "sd-hide"
+            },
+            {
+              "description": "Emitted after the tooltip has hidden and all animations are complete.",
+              "name": "sd-after-hide"
+            }
+          ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "| 'white'\n    | 'neutral-100'\n    | 'primary'\n    | 'primary-100'\n    | 'gradient-light'\n    | 'gradient-dark'"
+                "text": "'lg' | 'sm'"
               },
-              "default": "'white'",
-              "description": "Variant of the teaser",
-              "fieldName": "variant"
+              "default": "'lg'",
+              "description": "Sets the size of the default trigger icon.",
+              "fieldName": "size"
+            },
+            {
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
+              "fieldName": "content"
+            },
+            {
+              "name": "placement",
+              "type": {
+                "text": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'"
+              },
+              "default": "'top'",
+              "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
+              "fieldName": "placement"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables the tooltip so it won't show when triggered.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
+              "fieldName": "open"
+            },
+            {
+              "name": "trigger",
+              "type": {
+                "text": "string"
+              },
+              "default": "'click focus'",
+              "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
+              "fieldName": "trigger"
+            },
+            {
+              "name": "hoist",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
+              "fieldName": "hoist"
             },
             {
               "name": "dir",
@@ -15385,11 +15725,24 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Teasers group information into flexible containers so users can browse a collection of related items and actions.",
-          "documentation": "https://solid-design-system.fe.union-investment.de/docs/?path=/docs/components-sd-teaser-media--docs",
+          "summary": "Tooltips display additional information based on a specific action.",
+          "documentation": "https://solid.union-investment.com/[storybook-link]/tooltip",
           "status": "stable",
-          "since": "2.4.0",
-          "tagName": "sd-teaser-media",
+          "since": "1.23.0",
+          "dependencies": [
+            "sd-popup"
+          ],
+          "animations": [
+            {
+              "name": "tooltip.show",
+              "description": "The animation to use when showing the tooltip."
+            },
+            {
+              "name": "tooltip.hide",
+              "description": "The animation to use when hiding the tooltip."
+            }
+          ],
+          "tagName": "sd-tooltip",
           "customElement": true
         }
       ],
@@ -15398,16 +15751,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdTeaserMedia",
-            "module": "components/teaser-media/teaser-media.js"
+            "name": "SdTooltip",
+            "module": "components/tooltip/tooltip.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-teaser-media",
+          "name": "sd-tooltip",
           "declaration": {
-            "name": "SdTeaserMedia",
-            "module": "components/teaser-media/teaser-media.js"
+            "name": "SdTooltip",
+            "module": "components/tooltip/tooltip.js"
           }
         }
       ]
@@ -15804,511 +16157,41 @@
                     "text": "'select' | 'start' | 'end' | 'preserve'"
                   }
                 }
-              ],
-              "description": "Replaces a range of text with a new string."
-            },
-            {
-              "kind": "method",
-              "name": "checkValidity",
-              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
-            },
-            {
-              "kind": "method",
-              "name": "getForm",
-              "return": {
-                "type": {
-                  "text": "HTMLFormElement | null"
-                }
-              },
-              "description": "Gets the associated form, if one exists."
-            },
-            {
-              "kind": "method",
-              "name": "reportValidity",
-              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
-            },
-            {
-              "kind": "method",
-              "name": "setCustomValidity",
-              "parameters": [
-                {
-                  "name": "message",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "Sets a custom validation message. Pass an empty string to restore validity."
-            },
-            {
-              "kind": "field",
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "attribute": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "The element's language.",
-              "attribute": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "emit",
-              "parameters": [
-                {
-                  "name": "name",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "options",
-                  "optional": true,
-                  "type": {
-                    "text": "CustomEventInit"
-                  }
-                }
-              ],
-              "description": "Emits a custom event with more convenient defaults.",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "internal/solid-element.js"
-              }
-            }
-          ],
-          "events": [
-            {
-              "description": "Emitted when the control loses focus.",
-              "name": "sd-blur"
-            },
-            {
-              "description": "Emitted when an alteration to the control's value is committed by the user.",
-              "name": "sd-change"
-            },
-            {
-              "description": "Emitted when the control gains focus.",
-              "name": "sd-focus"
-            },
-            {
-              "description": "Emitted when the control receives input.",
-              "name": "sd-input"
-            },
-            {
-              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
-              "name": "sd-invalid"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "An empty title prevents browser validation tooltips from appearing on hover",
-              "fieldName": "title"
-            },
-            {
-              "name": "name",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The name of the textarea, submitted as a name/value pair with form data.",
-              "fieldName": "name"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The current value of the textarea, submitted as a name/value pair with form data.",
-              "fieldName": "value"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'md' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "The textarea's size.",
-              "fieldName": "size"
-            },
-            {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
-              "fieldName": "label"
-            },
-            {
-              "name": "help-text",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
-              "fieldName": "helpText"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Placeholder text to show as a hint when the input is empty.",
-              "fieldName": "placeholder"
-            },
-            {
-              "name": "rows",
-              "type": {
-                "text": "number"
-              },
-              "default": "4",
-              "description": "The number of rows to display by default.",
-              "fieldName": "rows"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the textarea.",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "readonly",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the textarea readonly.",
-              "fieldName": "readonly"
-            },
-            {
-              "name": "form",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
-              "fieldName": "form"
-            },
-            {
-              "name": "required",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Makes the textarea a required field.",
-              "fieldName": "required"
-            },
-            {
-              "name": "minlength",
-              "type": {
-                "text": "number"
-              },
-              "description": "The minimum length of input that will be considered valid.",
-              "fieldName": "minlength"
-            },
-            {
-              "name": "maxlength",
-              "type": {
-                "text": "number"
-              },
-              "description": "The maximum length of input that will be considered valid.",
-              "fieldName": "maxlength"
-            },
-            {
-              "name": "autocapitalize",
-              "type": {
-                "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
-              },
-              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
-              "fieldName": "autocapitalize"
-            },
-            {
-              "name": "autocorrect",
-              "type": {
-                "text": "'off' | 'on'"
-              },
-              "description": "Indicates whether the browser's autocorrect feature is on or off.",
-              "fieldName": "autocorrect"
-            },
-            {
-              "name": "autocomplete",
-              "type": {
-                "text": "string"
-              },
-              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
-              "fieldName": "autocomplete"
-            },
-            {
-              "name": "autofocus",
-              "type": {
-                "text": "boolean"
-              },
-              "description": "Indicates that the input should receive focus on page load.",
-              "fieldName": "autofocus"
-            },
-            {
-              "name": "enterkeyhint",
-              "type": {
-                "text": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
-              },
-              "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
-              "fieldName": "enterkeyhint"
-            },
-            {
-              "name": "style-on-valid",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows success styles if the validity of the input is valid.",
-              "fieldName": "styleOnValid"
-            },
-            {
-              "name": "spellcheck",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true",
-              "description": "Enables spell checking on the textarea.",
-              "fieldName": "spellcheck"
-            },
-            {
-              "name": "inputmode",
-              "type": {
-                "text": "'none' | 'text'"
-              },
-              "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
-              "fieldName": "inputmode"
-            },
-            {
-              "name": "dir",
-              "type": {
-                "text": "'ltr' | 'rtl' | 'auto'"
-              },
-              "description": "The element's directionality.",
-              "fieldName": "dir",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            },
-            {
-              "name": "lang",
-              "type": {
-                "text": "string"
-              },
-              "description": "The element's language.",
-              "fieldName": "lang",
-              "inheritedFrom": {
-                "name": "SolidElement",
-                "module": "src/internal/solid-element.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "SolidElement",
-            "module": "/src/internal/solid-element"
-          },
-          "summary": "Textareas collect data from the user and allow multiple lines of text.",
-          "status": "stable",
-          "since": "1.31.0",
-          "tagName": "sd-textarea",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "SdTextarea",
-            "module": "components/textarea/textarea.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "sd-textarea",
-          "declaration": {
-            "name": "SdTextarea",
-            "module": "components/textarea/textarea.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/tooltip/tooltip.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "SdTooltip",
-          "cssProperties": [
-            {
-              "description": "The maximum width of the tooltip before its content will wrap.",
-              "name": "--max-width"
-            },
-            {
-              "description": "The amount of time to wait before hiding the tooltip when hovering.",
-              "name": "--hide-delay"
-            },
-            {
-              "description": "The amount of time to wait before showing the tooltip when hovering.",
-              "name": "--show-delay"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's base wrapper, an `<sd-popup>` element.",
-              "name": "base"
-            },
-            {
-              "description": "The popup's exported `popup` part. Use this to target the tooltip's popup container.",
-              "name": "base__popup"
-            },
-            {
-              "description": "The popup's exported `arrow` part. Use this to target the tooltip's arrow.",
-              "name": "base__arrow"
-            },
-            {
-              "description": "The tooltip's body where its content is rendered.",
-              "name": "body"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.",
-              "name": ""
-            },
-            {
-              "description": "Slot to change the default trigger icon. The default icon is an info circle.",
-              "name": "anchor"
-            },
-            {
-              "description": "The content to render in the tooltip. Alternatively, you can use the `content` attribute.",
-              "name": "content"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "localize",
-              "privacy": "public",
-              "default": "new LocalizeController(this)"
-            },
-            {
-              "kind": "field",
-              "name": "popup",
-              "type": {
-                "text": "SdPopup"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'lg' | 'sm'"
-              },
-              "default": "'lg'",
-              "description": "Sets the size of the default trigger icon.",
-              "attribute": "size"
-            },
-            {
-              "kind": "field",
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
-              "attribute": "content"
-            },
-            {
-              "kind": "field",
-              "name": "placement",
-              "type": {
-                "text": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'"
-              },
-              "default": "'top'",
-              "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
-              "attribute": "placement",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Disables the tooltip so it won't show when triggered.",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "open",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
-              "attribute": "open",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "trigger",
-              "type": {
-                "text": "string"
-              },
-              "default": "'click focus'",
-              "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
-              "attribute": "trigger"
+              ],
+              "description": "Replaces a range of text with a new string."
             },
             {
-              "kind": "field",
-              "name": "hoist",
-              "type": {
-                "text": "boolean"
+              "kind": "method",
+              "name": "checkValidity",
+              "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
+            },
+            {
+              "kind": "method",
+              "name": "getForm",
+              "return": {
+                "type": {
+                  "text": "HTMLFormElement | null"
+                }
               },
-              "default": "false",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "attribute": "hoist"
+              "description": "Gets the associated form, if one exists."
             },
             {
               "kind": "method",
-              "name": "show",
-              "description": "Shows the tooltip."
+              "name": "reportValidity",
+              "description": "Checks for validity and shows the browser's validation message if the control is invalid."
             },
             {
               "kind": "method",
-              "name": "hide",
-              "description": "Hides the tooltip"
+              "name": "setCustomValidity",
+              "parameters": [
+                {
+                  "name": "message",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Sets a custom validation message. Pass an empty string to restore validity."
             },
             {
               "kind": "field",
@@ -16363,49 +16246,98 @@
           ],
           "events": [
             {
-              "description": "Emitted when the tooltip begins to show.",
-              "name": "sd-show"
+              "description": "Emitted when the control loses focus.",
+              "name": "sd-blur"
             },
             {
-              "description": "Emitted after the tooltip has shown and all animations are complete.",
-              "name": "sd-after-show"
+              "description": "Emitted when an alteration to the control's value is committed by the user.",
+              "name": "sd-change"
             },
             {
-              "description": "Emitted when the tooltip begins to hide.",
-              "name": "sd-hide"
+              "description": "Emitted when the control gains focus.",
+              "name": "sd-focus"
             },
             {
-              "description": "Emitted after the tooltip has hidden and all animations are complete.",
-              "name": "sd-after-hide"
+              "description": "Emitted when the control receives input.",
+              "name": "sd-input"
+            },
+            {
+              "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
+              "name": "sd-invalid"
             }
           ],
           "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "An empty title prevents browser validation tooltips from appearing on hover",
+              "fieldName": "title"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The name of the textarea, submitted as a name/value pair with form data.",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value of the textarea, submitted as a name/value pair with form data.",
+              "fieldName": "value"
+            },
             {
               "name": "size",
               "type": {
-                "text": "'lg' | 'sm'"
+                "text": "'lg' | 'md' | 'sm'"
               },
               "default": "'lg'",
-              "description": "Sets the size of the default trigger icon.",
+              "description": "The textarea's size.",
               "fieldName": "size"
             },
             {
-              "name": "content",
+              "name": "label",
               "type": {
                 "text": "string"
               },
               "default": "''",
-              "description": "The tooltip's content. If you need to display HTML, use the `content` slot instead.",
-              "fieldName": "content"
+              "description": "The textarea's label. If you need to display HTML, use the `label` slot instead.",
+              "fieldName": "label"
             },
             {
-              "name": "placement",
+              "name": "help-text",
               "type": {
-                "text": "'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'"
+                "text": "string"
               },
-              "default": "'top'",
-              "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
-              "fieldName": "placement"
+              "default": "''",
+              "description": "The textarea's help text. If you need to display HTML, use the `help-text` slot instead.",
+              "fieldName": "helpText"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text to show as a hint when the input is empty.",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "rows",
+              "type": {
+                "text": "number"
+              },
+              "default": "4",
+              "description": "The number of rows to display by default.",
+              "fieldName": "rows"
             },
             {
               "name": "disabled",
@@ -16413,35 +16345,117 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Disables the tooltip so it won't show when triggered.",
+              "description": "Disables the textarea.",
               "fieldName": "disabled"
             },
             {
-              "name": "open",
+              "name": "readonly",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods.",
-              "fieldName": "open"
+              "description": "Makes the textarea readonly.",
+              "fieldName": "readonly"
             },
             {
-              "name": "trigger",
+              "name": "form",
               "type": {
                 "text": "string"
               },
-              "default": "'click focus'",
-              "description": "Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\noptions can be passed by separating them with a space. When manual is used, the tooltip must be activated\nprogrammatically.",
-              "fieldName": "trigger"
+              "default": "''",
+              "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
+              "fieldName": "form"
             },
             {
-              "name": "hoist",
+              "name": "required",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n`overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\nscenarios.",
-              "fieldName": "hoist"
+              "description": "Makes the textarea a required field.",
+              "fieldName": "required"
+            },
+            {
+              "name": "minlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The minimum length of input that will be considered valid.",
+              "fieldName": "minlength"
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "number"
+              },
+              "description": "The maximum length of input that will be considered valid.",
+              "fieldName": "maxlength"
+            },
+            {
+              "name": "autocapitalize",
+              "type": {
+                "text": "'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'"
+              },
+              "description": "Controls whether and how text input is automatically capitalized as it is entered by the user.",
+              "fieldName": "autocapitalize"
+            },
+            {
+              "name": "autocorrect",
+              "type": {
+                "text": "'off' | 'on'"
+              },
+              "description": "Indicates whether the browser's autocorrect feature is on or off.",
+              "fieldName": "autocorrect"
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "string"
+              },
+              "description": "Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n[this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.",
+              "fieldName": "autocomplete"
+            },
+            {
+              "name": "autofocus",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Indicates that the input should receive focus on page load.",
+              "fieldName": "autofocus"
+            },
+            {
+              "name": "enterkeyhint",
+              "type": {
+                "text": "'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'"
+              },
+              "description": "Used to customize the label or icon of the Enter key on virtual keyboards.",
+              "fieldName": "enterkeyhint"
+            },
+            {
+              "name": "style-on-valid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows success styles if the validity of the input is valid.",
+              "fieldName": "styleOnValid"
+            },
+            {
+              "name": "spellcheck",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Enables spell checking on the textarea.",
+              "fieldName": "spellcheck"
+            },
+            {
+              "name": "inputmode",
+              "type": {
+                "text": "'none' | 'text'"
+              },
+              "description": "Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\nkeyboard on supportive devices.",
+              "fieldName": "inputmode"
             },
             {
               "name": "dir",
@@ -16472,24 +16486,10 @@
             "name": "SolidElement",
             "module": "/src/internal/solid-element"
           },
-          "summary": "Tooltips display additional information based on a specific action.",
-          "documentation": "https://solid.union-investment.com/[storybook-link]/tooltip",
+          "summary": "Textareas collect data from the user and allow multiple lines of text.",
           "status": "stable",
-          "since": "1.23.0",
-          "dependencies": [
-            "sd-popup"
-          ],
-          "animations": [
-            {
-              "name": "tooltip.show",
-              "description": "The animation to use when showing the tooltip."
-            },
-            {
-              "name": "tooltip.hide",
-              "description": "The animation to use when hiding the tooltip."
-            }
-          ],
-          "tagName": "sd-tooltip",
+          "since": "1.31.0",
+          "tagName": "sd-textarea",
           "customElement": true
         }
       ],
@@ -16498,16 +16498,16 @@
           "kind": "js",
           "name": "default",
           "declaration": {
-            "name": "SdTooltip",
-            "module": "components/tooltip/tooltip.js"
+            "name": "SdTextarea",
+            "module": "components/textarea/textarea.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "sd-tooltip",
+          "name": "sd-textarea",
           "declaration": {
-            "name": "SdTooltip",
-            "module": "components/tooltip/tooltip.js"
+            "name": "SdTextarea",
+            "module": "components/textarea/textarea.js"
           }
         }
       ]
@@ -16708,7 +16708,7 @@
   "package": {
     "name": "@solid-design-system/components",
     "description": "Solid Design System: Components",
-    "version": "4.0.6",
+    "version": "4.0.8",
     "author": "Union Investment",
     "homepage": "https://solid-design-system.fe.union-investment.de/docs/",
     "license": "MIT"