@db-ux/wc-core-components 4.3.2 → 4.4.0-loading-567cd0c

package/dist/custom-elements.json

@@ -6118,12 +6118,12 @@
     },
     {
       "kind": "javascript-module",
-      "path": "tooltip.tsx",
+      "path": "loading-indicator.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DBTooltip",
+          "name": "DBLoadingIndicator",
           "slots": [
             {
               "name": "children",
@@ -6155,30 +6155,147 @@
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "autoDisable",
               "type": {
-                "text": "\"description\" | \"label\""
+                "text": "boolean | string"
               },
-              "description": "Change the behavior of the tooltip:\n- description: Adds `aria-describedby` to parent\n- label: Adds `aria-labelledby` to parent",
+              "default": "true",
+              "description": "Disable the parent component (e.g. a DBButton) when loading indicator is inside it",
               "resolvedValue": {
-                "name": "variant",
-                "type": "TooltipVariantType",
-                "comment": "Change the behavior of the tooltip:\n- description: Adds `aria-describedby` to parent\n- label: Adds `aria-labelledby` to parent",
-                "resolvedType": "\"description\" | \"label\""
+                "name": "autoDisable",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "comment": "Disable the parent component (e.g. a DBButton) when loading indicator is inside it",
+                "resolvedType": "boolean | string"
               }
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "overlay",
               "type": {
-                "text": "\"undefined\" | \"undefined\""
+                "text": "boolean | string"
               },
-              "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
               "resolvedValue": {
-                "name": "placement",
-                "type": "PlacementType",
-                "comment": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
-                "resolvedType": "\"undefined\" | \"undefined\""
+                "name": "overlay",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "boolean | string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "\"inactive\" | \"active\" | \"successful\" | \"critical\" | string"
+              },
+              "resolvedValue": {
+                "name": "state",
+                "type": {
+                  "values": [
+                    "LoadingIndicatorStateType",
+                    "string"
+                  ],
+                  "type": "union"
+                },
+                "resolvedType": "\"inactive\" | \"active\" | \"successful\" | \"critical\" | string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean | string"
+              },
+              "default": "true",
+              "resolvedValue": {
+                "name": "indeterminate",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "boolean | string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "delay",
+              "type": {
+                "text": "\"none\" | \"slow\" | \"fast\""
+              },
+              "description": "Add a delay before showing the component",
+              "resolvedValue": {
+                "name": "delay",
+                "type": "PopoverDelayType",
+                "comment": "Add a delay before showing the component",
+                "resolvedType": "\"none\" | \"slow\" | \"fast\""
+              }
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | number"
+              },
+              "resolvedValue": {
+                "name": "value",
+                "type": {
+                  "values": [
+                    "string",
+                    "number"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "string | number"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "max",
+              "type": {
+                "text": "number | string"
+              },
+              "resolvedValue": {
+                "name": "max",
+                "type": {
+                  "values": [
+                    "number",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "number | string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "'alert' | 'status' | 'none'"
+              },
+              "resolvedValue": {
+                "name": "role",
+                "type": {
+                  "values": [
+                    "'alert'",
+                    "'status'",
+                    "'none'"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "'alert' | 'status' | 'none'"
               }
             },
             {
@@ -6197,27 +6314,41 @@
             },
             {
               "kind": "field",
-              "name": "emphasis",
+              "name": "size",
               "type": {
-                "text": "\"weak\" | \"strong\""
+                "text": "\"small\" | \"medium\""
               },
-              "description": "The emphasis attribute divides in between a weak or strong importance.",
+              "default": "\"medium\"",
+              "description": "The size attribute changes the font-size and other related sizes of the component.",
               "resolvedValue": {
-                "name": "emphasis",
-                "type": "EmphasisType",
-                "comment": "The emphasis attribute divides in between a weak or strong importance.",
-                "resolvedType": "\"weak\" | \"strong\""
+                "name": "size",
+                "type": "SizeType",
+                "comment": "The size attribute changes the font-size and other related sizes of the component.",
+                "resolvedType": "\"small\" | \"medium\""
               }
             },
             {
               "kind": "field",
-              "name": "animation",
+              "name": "variant",
+              "type": {
+                "text": "\"progress-bar\" | \"onsite\" | \"inline\""
+              },
+              "default": "\"inline\"",
+              "resolvedValue": {
+                "name": "variant",
+                "type": "LoadingIndicatorVariantType",
+                "resolvedType": "\"progress-bar\" | \"onsite\" | \"inline\""
+              }
+            },
+            {
+              "kind": "field",
+              "name": "showLabel",
               "type": {
                 "text": "boolean | string"
               },
-              "description": "Disable animation",
+              "description": "Enables/disables the visibility of the label",
               "resolvedValue": {
-                "name": "animation",
+                "name": "showLabel",
                 "type": {
                   "values": [
                     "boolean",
@@ -6225,47 +6356,43 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "Disable animation",
+                "comment": "Enables/disables the visibility of the label",
                 "resolvedType": "boolean | string"
               }
             },
             {
               "kind": "field",
-              "name": "delay",
+              "name": "label",
               "type": {
-                "text": "\"none\" | \"slow\" | \"fast\""
+                "text": "string"
               },
-              "description": "Add a delay before showing the tooltip",
               "resolvedValue": {
-                "name": "delay",
-                "type": "PopoverDelayType",
-                "comment": "Add a delay before showing the tooltip",
-                "resolvedType": "\"none\" | \"slow\" | \"fast\""
+                "name": "label",
+                "type": "string",
+                "resolvedType": "string"
               }
             },
             {
               "kind": "field",
-              "name": "width",
+              "name": "progressText",
               "type": {
-                "text": "\"auto\" | \"fixed\""
+                "text": "string"
               },
-              "description": "Use fixed with for default max-width",
               "resolvedValue": {
-                "name": "width",
-                "type": "PopoverWidthType",
-                "comment": "Use fixed with for default max-width",
-                "resolvedType": "\"auto\" | \"fixed\""
+                "name": "progressText",
+                "type": "string",
+                "resolvedType": "string"
               }
             },
             {
               "kind": "field",
-              "name": "showArrow",
+              "name": "showProgressText",
               "type": {
                 "text": "boolean | string"
               },
-              "description": "Show/Hides arrow",
+              "description": "Enables/disables the visibility of the progressText",
               "resolvedValue": {
-                "name": "showArrow",
+                "name": "showProgressText",
                 "type": {
                   "values": [
                     "boolean",
@@ -6273,7 +6400,7 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "Show/Hides arrow",
+                "comment": "Enables/disables the visibility of the progressText",
                 "resolvedType": "boolean | string"
               }
             },
@@ -6284,95 +6411,53 @@
             },
             {
               "kind": "field",
-              "name": "initialized",
+              "name": "_loadingState",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "default": "\"inactive\""
             },
             {
               "kind": "field",
-              "name": "_documentScrollListenerCallbackId",
+              "name": "_previousLoadingState",
               "default": "undefined"
             },
             {
               "kind": "field",
-              "name": "_observer",
-              "default": "undefined"
-            },
-            {
-              "kind": "method",
-              "name": "handleClick",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "ClickEvent<HTMLElement>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleEscape",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "any"
-                  }
-                }
-              ]
+              "name": "_style",
+              "type": {
+                "text": "object"
+              },
+              "default": "{}"
             },
             {
-              "kind": "method",
-              "name": "getParent"
+              "kind": "field",
+              "name": "initialized",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
               "kind": "method",
-              "name": "handleAutoPlacement",
-              "parameters": [
-                {
-                  "name": "parent",
-                  "optional": true,
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ]
+              "name": "getPercentage"
             },
             {
               "kind": "method",
-              "name": "handleDocumentScroll",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "any"
-                  }
-                },
-                {
-                  "name": "parent",
-                  "optional": true,
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ]
+              "name": "getRole"
             },
             {
               "kind": "method",
-              "name": "handleLeave"
+              "name": "handleParentDisabled"
             },
             {
               "kind": "method",
-              "name": "handleEnter",
+              "name": "handleParentAria",
               "parameters": [
                 {
-                  "name": "parent",
-                  "optional": true,
+                  "name": "remove",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "boolean"
                   }
                 }
               ]
@@ -6409,10 +6494,50 @@
             },
             {
               "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
+              "name": "watch1Fn"
+            },
+            {
+              "kind": "method",
+              "name": "watch1"
+            },
+            {
+              "kind": "method",
+              "name": "watch2Fn"
+            },
+            {
+              "kind": "method",
+              "name": "watch2"
+            },
+            {
+              "kind": "method",
+              "name": "watch3Fn"
+            },
+            {
+              "kind": "method",
+              "name": "watch3"
+            },
+            {
+              "kind": "method",
+              "name": "watch4Fn"
+            },
+            {
+              "kind": "method",
+              "name": "watch4"
+            },
+            {
+              "kind": "method",
+              "name": "watch5Fn"
+            },
+            {
+              "kind": "method",
+              "name": "watch5"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
             {
               "name": "id",
               "fieldName": "id",
@@ -6428,31 +6553,148 @@
               }
             },
             {
-              "name": "variant",
-              "fieldName": "variant",
+              "name": "auto-disable",
+              "fieldName": "autoDisable",
+              "default": "true",
               "type": {
-                "text": "\"description\" | \"label\""
+                "text": "boolean | string"
               },
-              "description": "Change the behavior of the tooltip:\n- description: Adds `aria-describedby` to parent\n- label: Adds `aria-labelledby` to parent",
+              "description": "Disable the parent component (e.g. a DBButton) when loading indicator is inside it",
               "resolvedValue": {
-                "name": "variant",
-                "type": "TooltipVariantType",
-                "comment": "Change the behavior of the tooltip:\n- description: Adds `aria-describedby` to parent\n- label: Adds `aria-labelledby` to parent",
-                "resolvedType": "\"description\" | \"label\""
+                "name": "autoDisable",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "comment": "Disable the parent component (e.g. a DBButton) when loading indicator is inside it",
+                "resolvedType": "boolean | string"
               }
             },
             {
-              "name": "placement",
-              "fieldName": "placement",
+              "name": "overlay",
+              "fieldName": "overlay",
               "type": {
-                "text": "\"undefined\" | \"undefined\""
+                "text": "boolean | string"
               },
-              "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
               "resolvedValue": {
-                "name": "placement",
-                "type": "PlacementType",
-                "comment": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
-                "resolvedType": "\"undefined\" | \"undefined\""
+                "name": "overlay",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "boolean | string"
+              }
+            },
+            {
+              "name": "state",
+              "fieldName": "state",
+              "type": {
+                "text": "\"inactive\" | \"active\" | \"successful\" | \"critical\" | string"
+              },
+              "resolvedValue": {
+                "name": "state",
+                "type": {
+                  "values": [
+                    "LoadingIndicatorStateType",
+                    "string"
+                  ],
+                  "type": "union"
+                },
+                "resolvedType": "\"inactive\" | \"active\" | \"successful\" | \"critical\" | string"
+              }
+            },
+            {
+              "name": "indeterminate",
+              "fieldName": "indeterminate",
+              "default": "true",
+              "type": {
+                "text": "boolean | string"
+              },
+              "resolvedValue": {
+                "name": "indeterminate",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "boolean | string"
+              }
+            },
+            {
+              "name": "delay",
+              "fieldName": "delay",
+              "type": {
+                "text": "\"none\" | \"slow\" | \"fast\""
+              },
+              "description": "Add a delay before showing the component",
+              "resolvedValue": {
+                "name": "delay",
+                "type": "PopoverDelayType",
+                "comment": "Add a delay before showing the component",
+                "resolvedType": "\"none\" | \"slow\" | \"fast\""
+              }
+            },
+            {
+              "name": "value",
+              "fieldName": "value",
+              "type": {
+                "text": "string | number"
+              },
+              "resolvedValue": {
+                "name": "value",
+                "type": {
+                  "values": [
+                    "string",
+                    "number"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "string | number"
+              }
+            },
+            {
+              "name": "max",
+              "fieldName": "max",
+              "type": {
+                "text": "number | string"
+              },
+              "resolvedValue": {
+                "name": "max",
+                "type": {
+                  "values": [
+                    "number",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "number | string"
+              }
+            },
+            {
+              "name": "role",
+              "fieldName": "role",
+              "type": {
+                "text": "'alert' | 'status' | 'none'"
+              },
+              "resolvedValue": {
+                "name": "role",
+                "type": {
+                  "values": [
+                    "'alert'",
+                    "'status'",
+                    "'none'"
+                  ],
+                  "type": "literal"
+                },
+                "resolvedType": "'alert' | 'status' | 'none'"
               }
             },
             {
@@ -6470,28 +6712,42 @@
               }
             },
             {
-              "name": "emphasis",
-              "fieldName": "emphasis",
+              "name": "size",
+              "fieldName": "size",
+              "default": "\"medium\"",
               "type": {
-                "text": "\"weak\" | \"strong\""
+                "text": "\"small\" | \"medium\""
               },
-              "description": "The emphasis attribute divides in between a weak or strong importance.",
+              "description": "The size attribute changes the font-size and other related sizes of the component.",
               "resolvedValue": {
-                "name": "emphasis",
-                "type": "EmphasisType",
-                "comment": "The emphasis attribute divides in between a weak or strong importance.",
-                "resolvedType": "\"weak\" | \"strong\""
+                "name": "size",
+                "type": "SizeType",
+                "comment": "The size attribute changes the font-size and other related sizes of the component.",
+                "resolvedType": "\"small\" | \"medium\""
               }
             },
             {
-              "name": "animation",
-              "fieldName": "animation",
+              "name": "variant",
+              "fieldName": "variant",
+              "default": "\"inline\"",
+              "type": {
+                "text": "\"progress-bar\" | \"onsite\" | \"inline\""
+              },
+              "resolvedValue": {
+                "name": "variant",
+                "type": "LoadingIndicatorVariantType",
+                "resolvedType": "\"progress-bar\" | \"onsite\" | \"inline\""
+              }
+            },
+            {
+              "name": "show-label",
+              "fieldName": "showLabel",
               "type": {
                 "text": "boolean | string"
               },
-              "description": "Disable animation",
+              "description": "Enables/disables the visibility of the label",
               "resolvedValue": {
-                "name": "animation",
+                "name": "showLabel",
                 "type": {
                   "values": [
                     "boolean",
@@ -6499,47 +6755,43 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "Disable animation",
+                "comment": "Enables/disables the visibility of the label",
                 "resolvedType": "boolean | string"
               }
             },
             {
-              "name": "delay",
-              "fieldName": "delay",
+              "name": "label",
+              "fieldName": "label",
               "type": {
-                "text": "\"none\" | \"slow\" | \"fast\""
+                "text": "string"
               },
-              "description": "Add a delay before showing the tooltip",
               "resolvedValue": {
-                "name": "delay",
-                "type": "PopoverDelayType",
-                "comment": "Add a delay before showing the tooltip",
-                "resolvedType": "\"none\" | \"slow\" | \"fast\""
+                "name": "label",
+                "type": "string",
+                "resolvedType": "string"
               }
             },
             {
-              "name": "width",
-              "fieldName": "width",
+              "name": "progress-text",
+              "fieldName": "progressText",
               "type": {
-                "text": "\"auto\" | \"fixed\""
+                "text": "string"
               },
-              "description": "Use fixed with for default max-width",
               "resolvedValue": {
-                "name": "width",
-                "type": "PopoverWidthType",
-                "comment": "Use fixed with for default max-width",
-                "resolvedType": "\"auto\" | \"fixed\""
+                "name": "progressText",
+                "type": "string",
+                "resolvedType": "string"
               }
             },
             {
-              "name": "show-arrow",
-              "fieldName": "showArrow",
+              "name": "show-progress-text",
+              "fieldName": "showProgressText",
               "type": {
                 "text": "boolean | string"
               },
-              "description": "Show/Hides arrow",
+              "description": "Enables/disables the visibility of the progressText",
               "resolvedValue": {
-                "name": "showArrow",
+                "name": "showProgressText",
                 "type": {
                   "values": [
                     "boolean",
@@ -6547,51 +6799,54 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "Show/Hides arrow",
+                "comment": "Enables/disables the visibility of the progressText",
                 "resolvedType": "boolean | string"
               }
             }
           ],
-          "tagName": "db-tooltip",
-          "events": [],
+          "tagName": "db-loading-indicator",
+          "events": [
+            {
+              "name": "timeout",
+              "type": {
+                "text": "EventEmitter<\n    Parameters<Required<DBLoadingIndicatorProps>[\"onTimeout\"]>[number]\n  > | void"
+              }
+            }
+          ],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "DBTooltip",
+          "name": "DBLoadingIndicator",
           "declaration": {
-            "name": "DBTooltip",
-            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/tooltip/tooltip.tsx"
+            "name": "DBLoadingIndicator",
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/loading-indicator/loading-indicator.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "db-tooltip",
+          "name": "db-loading-indicator",
           "declaration": {
-            "name": "DBTooltip",
-            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/tooltip/tooltip.tsx"
+            "name": "DBLoadingIndicator",
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/loading-indicator/loading-indicator.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "tag.tsx",
+      "path": "tooltip.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "DBTag",
+          "name": "DBTooltip",
           "slots": [
             {
               "name": "children",
               "description": "default slot"
-            },
-            {
-              "name": "content",
-              "description": "Default slot which is used to pass in additional content."
             }
           ],
           "members": [
@@ -6605,58 +6860,58 @@
             },
             {
               "kind": "field",
-              "name": "removeButton",
+              "name": "id",
               "type": {
                 "text": "string"
               },
-              "description": "The removeButton attribute shows the cancel button.",
+              "description": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
               "resolvedValue": {
-                "name": "removeButton",
+                "name": "id",
                 "type": "string",
-                "comment": "The removeButton attribute shows the cancel button.",
+                "comment": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
                 "resolvedType": "string"
               }
             },
             {
               "kind": "field",
-              "name": "id",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "\"description\" | \"label\""
               },
-              "description": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
+              "description": "Change the behavior of the tooltip:\n- description: Adds `aria-describedby` to parent\n- label: Adds `aria-labelledby` to parent",
               "resolvedValue": {
-                "name": "id",
-                "type": "string",
-                "comment": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
-                "resolvedType": "string"
+                "name": "variant",
+                "type": "TooltipVariantType",
+                "comment": "Change the behavior of the tooltip:\n- description: Adds `aria-describedby` to parent\n- label: Adds `aria-labelledby` to parent",
+                "resolvedType": "\"description\" | \"label\""
               }
             },
             {
               "kind": "field",
-              "name": "className",
+              "name": "placement",
               "type": {
-                "text": "string"
+                "text": "\"undefined\" | \"undefined\""
               },
-              "description": "React specific for adding className to the component.",
+              "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
               "resolvedValue": {
-                "name": "className",
-                "type": "string",
-                "comment": "React specific for adding className to the component.",
-                "resolvedType": "string"
+                "name": "placement",
+                "type": "PlacementType",
+                "comment": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
+                "resolvedType": "\"undefined\" | \"undefined\""
               }
             },
             {
               "kind": "field",
-              "name": "semantic",
+              "name": "className",
               "type": {
-                "text": "\"adaptive\" | \"neutral\" | \"critical\" | \"informational\" | \"warning\" | \"successful\""
+                "text": "string"
               },
-              "description": "The semantic defines the default variants for most components.",
+              "description": "React specific for adding className to the component.",
               "resolvedValue": {
-                "name": "semantic",
-                "type": "SemanticType",
-                "comment": "The semantic defines the default variants for most components.",
-                "resolvedType": "\"adaptive\" | \"neutral\" | \"critical\" | \"informational\" | \"warning\" | \"successful\""
+                "name": "className",
+                "type": "string",
+                "comment": "React specific for adding className to the component.",
+                "resolvedType": "string"
               }
             },
             {
@@ -6675,27 +6930,11 @@
             },
             {
               "kind": "field",
-              "name": "icon",
-              "type": {
-                "text": "IconTypes"
-              },
-              "description": "Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.",
-              "resolvedValue": {
-                "name": "icon",
-                "type": "IconTypes",
-                "comment": "Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.",
-                "resolvedType": "IconTypes"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "showCheckState",
-              "type": {
-                "text": "boolean | string"
-              },
-              "description": "Enable/Disable icon for checkbox/radio inside tag.",
+              "name": "animation",
+              "type": {},
+              "description": "Disable animation",
               "resolvedValue": {
-                "name": "showCheckState",
+                "name": "animation",
                 "type": {
                   "values": [
                     "boolean",
@@ -6703,59 +6942,43 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "Enable/Disable icon for checkbox/radio inside tag.",
-                "resolvedType": "boolean | string"
+                "comment": "Disable animation"
               }
             },
             {
               "kind": "field",
-              "name": "showIcon",
+              "name": "delay",
               "type": {
-                "text": "boolean | string"
+                "text": "\"none\" | \"slow\" | \"fast\""
               },
-              "description": "Enables or disables the visibility of the icon. The default value depends on the component.\nFor many components this property is optional to reflect Figma properties.",
+              "description": "Add a delay before showing the component",
               "resolvedValue": {
-                "name": "showIcon",
-                "type": {
-                  "values": [
-                    "boolean",
-                    "string"
-                  ],
-                  "type": "literal"
-                },
-                "comment": "Enables or disables the visibility of the icon. The default value depends on the component.\nFor many components this property is optional to reflect Figma properties.",
-                "resolvedType": "boolean | string"
+                "name": "delay",
+                "type": "PopoverDelayType",
+                "comment": "Add a delay before showing the component",
+                "resolvedType": "\"none\" | \"slow\" | \"fast\""
               }
             },
             {
               "kind": "field",
-              "name": "noText",
-              "type": {
-                "text": "boolean | string"
-              },
-              "description": "Define the text next to the icon specified via the icon Property to get hidden.",
+              "name": "width",
+              "type": {},
+              "description": "Use fixed with for default max-width",
               "resolvedValue": {
-                "name": "noText",
-                "type": {
-                  "values": [
-                    "boolean",
-                    "string"
-                  ],
-                  "type": "literal"
-                },
-                "comment": "Define the text next to the icon specified via the icon Property to get hidden.",
-                "resolvedType": "boolean | string"
+                "name": "width",
+                "type": "PopoverWidthType",
+                "comment": "Use fixed with for default max-width"
               }
             },
             {
               "kind": "field",
-              "name": "overflow",
+              "name": "showArrow",
               "type": {
                 "text": "boolean | string"
               },
-              "description": "The overflow attribute sets a max-width and longer text will be dotted.",
+              "description": "Show/Hides arrow",
               "resolvedValue": {
-                "name": "overflow",
+                "name": "showArrow",
                 "type": {
                   "values": [
                     "boolean",
@@ -6763,60 +6986,109 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "The overflow attribute sets a max-width and longer text will be dotted.",
+                "comment": "Show/Hides arrow",
                 "resolvedType": "boolean | string"
               }
             },
             {
               "kind": "field",
-              "name": "text",
-              "type": {
-                "text": "string"
-              },
-              "description": "Alternative for children to set content as property.",
-              "resolvedValue": {
-                "name": "text",
-                "type": "string",
-                "comment": "Alternative for children to set content as property.",
-                "resolvedType": "string"
-              }
+              "name": "_id",
+              "default": "DEFAULT_ID"
             },
             {
               "kind": "field",
-              "name": "behavior",
+              "name": "initialized",
               "type": {
-                "text": "\"static\" | \"removable\" | string"
+                "text": "boolean"
               },
-              "description": "Defines the behavior of the component:\n- static: default behavior without remove button\n - removable: add a remove button at the end of the tag",
-              "resolvedValue": {
-                "name": "behavior",
-                "type": {
-                  "values": [
-                    "TagBehaviorType",
-                    "string"
-                  ],
-                  "type": "union"
-                },
-                "comment": "Defines the behavior of the component:\n- static: default behavior without remove button\n - removable: add a remove button at the end of the tag",
-                "resolvedType": "\"static\" | \"removable\" | string"
-              }
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_documentScrollListenerCallbackId",
+              "default": "undefined"
+            },
+            {
+              "kind": "field",
+              "name": "_observer",
+              "default": "undefined"
             },
             {
               "kind": "method",
-              "name": "handleRemove",
+              "name": "handleClick",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "ClickEvent<HTMLElement>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleEscape",
               "parameters": [
                 {
                   "name": "event",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getParent"
+            },
+            {
+              "kind": "method",
+              "name": "handleAutoPlacement",
+              "parameters": [
+                {
+                  "name": "parent",
                   "optional": true,
                   "type": {
-                    "text": "ClickEvent<HTMLButtonElement> | void"
+                    "text": "HTMLElement"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "getRemoveButtonText"
+              "name": "handleDocumentScroll",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "any"
+                  }
+                },
+                {
+                  "name": "parent",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleLeave"
+            },
+            {
+              "kind": "method",
+              "name": "handleEnter",
+              "parameters": [
+                {
+                  "name": "parent",
+                  "optional": true,
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
@@ -6840,26 +7112,20 @@
               ],
               "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
             },
+            {
+              "kind": "method",
+              "name": "watch0Fn"
+            },
+            {
+              "kind": "method",
+              "name": "watch0"
+            },
             {
               "kind": "method",
               "name": "render"
             }
           ],
           "attributes": [
-            {
-              "name": "remove-button",
-              "fieldName": "removeButton",
-              "type": {
-                "text": "string"
-              },
-              "description": "The removeButton attribute shows the cancel button.",
-              "resolvedValue": {
-                "name": "removeButton",
-                "type": "string",
-                "comment": "The removeButton attribute shows the cancel button.",
-                "resolvedType": "string"
-              }
-            },
             {
               "name": "id",
               "fieldName": "id",
@@ -6875,22 +7141,220 @@
               }
             },
             {
-              "name": "classname",
-              "fieldName": "className",
+              "name": "variant",
+              "fieldName": "variant",
               "type": {
-                "text": "string"
+                "text": "\"description\" | \"label\""
               },
-              "description": "React specific for adding className to the component.",
+              "description": "Change the behavior of the tooltip:\n- description: Adds `aria-describedby` to parent\n- label: Adds `aria-labelledby` to parent",
               "resolvedValue": {
-                "name": "className",
+                "name": "variant",
+                "type": "TooltipVariantType",
+                "comment": "Change the behavior of the tooltip:\n- description: Adds `aria-describedby` to parent\n- label: Adds `aria-labelledby` to parent",
+                "resolvedType": "\"description\" | \"label\""
+              }
+            },
+            {
+              "name": "placement",
+              "fieldName": "placement",
+              "type": {
+                "text": "\"undefined\" | \"undefined\""
+              },
+              "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
+              "resolvedValue": {
+                "name": "placement",
+                "type": "PlacementType",
+                "comment": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
+                "resolvedType": "\"undefined\" | \"undefined\""
+              }
+            },
+            {
+              "name": "classname",
+              "fieldName": "className",
+              "type": {
+                "text": "string"
+              },
+              "description": "React specific for adding className to the component.",
+              "resolvedValue": {
+                "name": "className",
+                "type": "string",
+                "comment": "React specific for adding className to the component.",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "name": "emphasis",
+              "fieldName": "emphasis",
+              "type": {
+                "text": "\"weak\" | \"strong\""
+              },
+              "description": "The emphasis attribute divides in between a weak or strong importance.",
+              "resolvedValue": {
+                "name": "emphasis",
+                "type": "EmphasisType",
+                "comment": "The emphasis attribute divides in between a weak or strong importance.",
+                "resolvedType": "\"weak\" | \"strong\""
+              }
+            },
+            {
+              "name": "animation",
+              "fieldName": "animation",
+              "type": {},
+              "description": "Disable animation",
+              "resolvedValue": {
+                "name": "animation",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "comment": "Disable animation"
+              }
+            },
+            {
+              "name": "delay",
+              "fieldName": "delay",
+              "type": {
+                "text": "\"none\" | \"slow\" | \"fast\""
+              },
+              "description": "Add a delay before showing the component",
+              "resolvedValue": {
+                "name": "delay",
+                "type": "PopoverDelayType",
+                "comment": "Add a delay before showing the component",
+                "resolvedType": "\"none\" | \"slow\" | \"fast\""
+              }
+            },
+            {
+              "name": "width",
+              "fieldName": "width",
+              "type": {},
+              "description": "Use fixed with for default max-width",
+              "resolvedValue": {
+                "name": "width",
+                "type": "PopoverWidthType",
+                "comment": "Use fixed with for default max-width"
+              }
+            },
+            {
+              "name": "show-arrow",
+              "fieldName": "showArrow",
+              "type": {
+                "text": "boolean | string"
+              },
+              "description": "Show/Hides arrow",
+              "resolvedValue": {
+                "name": "showArrow",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "comment": "Show/Hides arrow",
+                "resolvedType": "boolean | string"
+              }
+            }
+          ],
+          "tagName": "db-tooltip",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DBTooltip",
+          "declaration": {
+            "name": "DBTooltip",
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/tooltip/tooltip.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "db-tooltip",
+          "declaration": {
+            "name": "DBTooltip",
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/tooltip/tooltip.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "tag.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DBTag",
+          "slots": [
+            {
+              "name": "children",
+              "description": "default slot"
+            },
+            {
+              "name": "content",
+              "description": "Default slot which is used to pass in additional content."
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLDivElement | any"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "removeButton",
+              "type": {
+                "text": "string"
+              },
+              "description": "The removeButton attribute shows the cancel button.",
+              "resolvedValue": {
+                "name": "removeButton",
+                "type": "string",
+                "comment": "The removeButton attribute shows the cancel button.",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "id",
+              "type": {
+                "text": "string"
+              },
+              "description": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
+              "resolvedValue": {
+                "name": "id",
+                "type": "string",
+                "comment": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "className",
+              "type": {
+                "text": "string"
+              },
+              "description": "React specific for adding className to the component.",
+              "resolvedValue": {
+                "name": "className",
                 "type": "string",
                 "comment": "React specific for adding className to the component.",
                 "resolvedType": "string"
               }
             },
             {
+              "kind": "field",
               "name": "semantic",
-              "fieldName": "semantic",
               "type": {
                 "text": "\"adaptive\" | \"neutral\" | \"critical\" | \"informational\" | \"warning\" | \"successful\""
               },
@@ -6903,8 +7367,8 @@
               }
             },
             {
+              "kind": "field",
               "name": "emphasis",
-              "fieldName": "emphasis",
               "type": {
                 "text": "\"weak\" | \"strong\""
               },
@@ -6917,8 +7381,8 @@
               }
             },
             {
+              "kind": "field",
               "name": "icon",
-              "fieldName": "icon",
               "type": {
                 "text": "IconTypes"
               },
@@ -6931,8 +7395,8 @@
               }
             },
             {
-              "name": "show-check-state",
-              "fieldName": "showCheckState",
+              "kind": "field",
+              "name": "showCheckState",
               "type": {
                 "text": "boolean | string"
               },
@@ -6951,8 +7415,8 @@
               }
             },
             {
-              "name": "show-icon",
-              "fieldName": "showIcon",
+              "kind": "field",
+              "name": "showIcon",
               "type": {
                 "text": "boolean | string"
               },
@@ -6971,8 +7435,8 @@
               }
             },
             {
-              "name": "no-text",
-              "fieldName": "noText",
+              "kind": "field",
+              "name": "noText",
               "type": {
                 "text": "boolean | string"
               },
@@ -6991,8 +7455,8 @@
               }
             },
             {
+              "kind": "field",
               "name": "overflow",
-              "fieldName": "overflow",
               "type": {
                 "text": "boolean | string"
               },
@@ -7011,8 +7475,8 @@
               }
             },
             {
+              "kind": "field",
               "name": "text",
-              "fieldName": "text",
               "type": {
                 "text": "string"
               },
@@ -7025,8 +7489,8 @@
               }
             },
             {
+              "kind": "field",
               "name": "behavior",
-              "fieldName": "behavior",
               "type": {
                 "text": "\"static\" | \"removable\" | string"
               },
@@ -7043,97 +7507,69 @@
                 "comment": "Defines the behavior of the component:\n- static: default behavior without remove button\n - removable: add a remove button at the end of the tag",
                 "resolvedType": "\"static\" | \"removable\" | string"
               }
-            }
-          ],
-          "tagName": "db-tag",
-          "events": [
+            },
             {
-              "name": "remove",
-              "type": {
-                "text": "EventEmitter<\n    Parameters<Required<DBTagProps>[\"remove\"]>[number]\n  > | void"
-              }
-            }
-          ],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DBTag",
-          "declaration": {
-            "name": "DBTag",
-            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/tag/tag.tsx"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "db-tag",
-          "declaration": {
-            "name": "DBTag",
-            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/tag/tag.tsx"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "custom-select.tsx",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "DBCustomSelect",
-          "slots": [
-            {
-              "name": "children",
-              "description": "default slot"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "_ref",
-              "type": {
-                "text": "HTMLDivElement | any"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "handleRemove",
+              "parameters": [
+                {
+                  "name": "event",
+                  "optional": true,
+                  "type": {
+                    "text": "ClickEvent<HTMLButtonElement> | void"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "detailsRef",
-              "type": {
-                "text": "HTMLDetailsElement | any"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "getRemoveButtonText"
             },
             {
-              "kind": "field",
-              "name": "selectRef",
-              "type": {
-                "text": "HTMLSelectElement | any"
-              },
-              "privacy": "private"
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
             },
             {
-              "kind": "field",
-              "name": "selectAllRef",
-              "type": {
-                "text": "HTMLInputElement | any"
-              },
-              "privacy": "private"
-            },
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "searchInputRef",
+              "name": "remove-button",
+              "fieldName": "removeButton",
               "type": {
-                "text": "HTMLInputElement | any"
+                "text": "string"
               },
-              "privacy": "private"
+              "description": "The removeButton attribute shows the cancel button.",
+              "resolvedValue": {
+                "name": "removeButton",
+                "type": "string",
+                "comment": "The removeButton attribute shows the cancel button.",
+                "resolvedType": "string"
+              }
             },
             {
-              "kind": "field",
               "name": "id",
+              "fieldName": "id",
               "type": {
                 "text": "string"
               },
@@ -7146,104 +7582,110 @@
               }
             },
             {
-              "kind": "field",
-              "name": "invalidMessage",
+              "name": "classname",
+              "fieldName": "className",
               "type": {
                 "text": "string"
               },
-              "description": "Helper message for invalid form components",
+              "description": "React specific for adding className to the component.",
               "resolvedValue": {
-                "name": "invalidMessage",
+                "name": "className",
                 "type": "string",
-                "comment": "Helper message for invalid form components",
+                "comment": "React specific for adding className to the component.",
                 "resolvedType": "string"
               }
             },
             {
-              "kind": "field",
-              "name": "message",
+              "name": "semantic",
+              "fieldName": "semantic",
               "type": {
-                "text": "string"
+                "text": "\"adaptive\" | \"neutral\" | \"critical\" | \"informational\" | \"warning\" | \"successful\""
               },
-              "description": "Optional helper message for form components",
+              "description": "The semantic defines the default variants for most components.",
               "resolvedValue": {
-                "name": "message",
-                "type": "string",
-                "comment": "Optional helper message for form components",
-                "resolvedType": "string"
+                "name": "semantic",
+                "type": "SemanticType",
+                "comment": "The semantic defines the default variants for most components.",
+                "resolvedType": "\"adaptive\" | \"neutral\" | \"critical\" | \"informational\" | \"warning\" | \"successful\""
               }
             },
             {
-              "kind": "field",
-              "name": "showMessage",
+              "name": "emphasis",
+              "fieldName": "emphasis",
               "type": {
-                "text": "boolean | string"
+                "text": "\"weak\" | \"strong\""
               },
-              "description": "Enables or disables the visibility of the message.",
+              "description": "The emphasis attribute divides in between a weak or strong importance.",
               "resolvedValue": {
-                "name": "showMessage",
-                "type": {
-                  "values": [
-                    "boolean",
-                    "string"
-                  ],
-                  "type": "literal"
-                },
-                "comment": "Enables or disables the visibility of the message.",
-                "resolvedType": "boolean | string"
+                "name": "emphasis",
+                "type": "EmphasisType",
+                "comment": "The emphasis attribute divides in between a weak or strong importance.",
+                "resolvedType": "\"weak\" | \"strong\""
               }
             },
             {
-              "kind": "field",
-              "name": "ariaDescribedBy",
+              "name": "icon",
+              "fieldName": "icon",
               "type": {
-                "text": "string"
+                "text": "IconTypes"
               },
-              "description": "Overwrites auto handling for aria-describedby.",
+              "description": "Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.",
               "resolvedValue": {
-                "name": "ariaDescribedBy",
-                "type": "string",
-                "comment": "Overwrites auto handling for aria-describedby.",
-                "resolvedType": "string"
+                "name": "icon",
+                "type": "IconTypes",
+                "comment": "Define an icon by its identifier (like e.g. _user_, compare to [Icons](https://design-system.deutschebahn.com/core-web/review/main/foundations/icons/overview)) to get displayed in front of the elements content.",
+                "resolvedType": "IconTypes"
               }
             },
             {
-              "kind": "field",
-              "name": "showNoResults",
+              "name": "show-check-state",
+              "fieldName": "showCheckState",
               "type": {
-                "text": "boolean"
+                "text": "boolean | string"
               },
-              "description": "Dropdown - enable no options infotext",
+              "description": "Enable/Disable icon for checkbox/radio inside tag.",
               "resolvedValue": {
-                "name": "showNoResults",
-                "type": "boolean",
-                "comment": "Dropdown - enable no options infotext",
-                "resolvedType": "boolean"
+                "name": "showCheckState",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "comment": "Enable/Disable icon for checkbox/radio inside tag.",
+                "resolvedType": "boolean | string"
               }
             },
             {
-              "kind": "field",
-              "name": "showLoading",
+              "name": "show-icon",
+              "fieldName": "showIcon",
               "type": {
-                "text": "boolean"
+                "text": "boolean | string"
               },
-              "description": "Dropdown - enable loading infotext and spinner",
+              "description": "Enables or disables the visibility of the icon. The default value depends on the component.\nFor many components this property is optional to reflect Figma properties.",
               "resolvedValue": {
-                "name": "showLoading",
-                "type": "boolean",
-                "comment": "Dropdown - enable loading infotext and spinner",
-                "resolvedType": "boolean"
+                "name": "showIcon",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "comment": "Enables or disables the visibility of the icon. The default value depends on the component.\nFor many components this property is optional to reflect Figma properties.",
+                "resolvedType": "boolean | string"
               }
             },
             {
-              "kind": "field",
-              "name": "multiple",
+              "name": "no-text",
+              "fieldName": "noText",
               "type": {
                 "text": "boolean | string"
               },
-              "description": "Enables CustomSelect",
+              "description": "Define the text next to the icon specified via the icon Property to get hidden.",
               "resolvedValue": {
-                "name": "multiple",
+                "name": "noText",
                 "type": {
                   "values": [
                     "boolean",
@@ -7251,173 +7693,202 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "Enables CustomSelect",
+                "comment": "Define the text next to the icon specified via the icon Property to get hidden.",
                 "resolvedType": "boolean | string"
               }
             },
             {
-              "kind": "field",
-              "name": "showSelectAll",
+              "name": "overflow",
+              "fieldName": "overflow",
               "type": {
-                "text": "boolean"
+                "text": "boolean | string"
               },
-              "description": "Forces select all checkbox (only for multiple).",
+              "description": "The overflow attribute sets a max-width and longer text will be dotted.",
               "resolvedValue": {
-                "name": "showSelectAll",
-                "type": "boolean",
-                "comment": "Forces select all checkbox (only for multiple).",
-                "resolvedType": "boolean"
+                "name": "overflow",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "comment": "The overflow attribute sets a max-width and longer text will be dotted.",
+                "resolvedType": "boolean | string"
               }
             },
             {
-              "kind": "field",
-              "name": "showSearch",
+              "name": "text",
+              "fieldName": "text",
               "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "description": "Forces search in header.",
+              "description": "Alternative for children to set content as property.",
               "resolvedValue": {
-                "name": "showSearch",
-                "type": "boolean",
-                "comment": "Forces search in header.",
-                "resolvedType": "boolean"
+                "name": "text",
+                "type": "string",
+                "comment": "Alternative for children to set content as property.",
+                "resolvedType": "string"
               }
             },
             {
-              "kind": "field",
-              "name": "values",
+              "name": "behavior",
+              "fieldName": "behavior",
               "type": {
-                "text": "string[]"
+                "text": "\"static\" | \"removable\" | string"
               },
-              "description": "Initial value for multi select",
+              "description": "Defines the behavior of the component:\n- static: default behavior without remove button\n - removable: add a remove button at the end of the tag",
               "resolvedValue": {
-                "name": "values",
-                "type": "string[]",
-                "comment": "Initial value for multi select",
-                "resolvedType": "string[]"
+                "name": "behavior",
+                "type": {
+                  "values": [
+                    "TagBehaviorType",
+                    "string"
+                  ],
+                  "type": "union"
+                },
+                "comment": "Defines the behavior of the component:\n- static: default behavior without remove button\n - removable: add a remove button at the end of the tag",
+                "resolvedType": "\"static\" | \"removable\" | string"
               }
-            },
+            }
+          ],
+          "tagName": "db-tag",
+          "events": [
+            {
+              "name": "remove",
+              "type": {
+                "text": "EventEmitter<\n    Parameters<Required<DBTagProps>[\"remove\"]>[number]\n  > | void"
+              }
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DBTag",
+          "declaration": {
+            "name": "DBTag",
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/tag/tag.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "db-tag",
+          "declaration": {
+            "name": "DBTag",
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/tag/tag.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "custom-select.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DBCustomSelect",
+          "slots": [
+            {
+              "name": "children",
+              "description": "default slot"
+            }
+          ],
+          "members": [
             {
               "kind": "field",
-              "name": "validation",
+              "name": "_ref",
               "type": {
-                "text": "\"invalid\" | \"valid\" | \"no-validation\""
+                "text": "HTMLDivElement | any"
               },
-              "description": "Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.",
-              "resolvedValue": {
-                "name": "validation",
-                "type": "ValidationType",
-                "comment": "Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.",
-                "resolvedType": "\"invalid\" | \"valid\" | \"no-validation\""
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "options",
+              "name": "detailsRef",
               "type": {
-                "text": "CustomSelectOptionType[]"
+                "text": "HTMLDetailsElement | any"
               },
-              "description": "You should pass in the options as an array.",
-              "resolvedValue": {
-                "name": "options",
-                "type": "CustomSelectOptionType[]",
-                "comment": "You should pass in the options as an array.",
-                "resolvedType": "CustomSelectOptionType[]"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "searchValue",
+              "name": "selectRef",
               "type": {
-                "text": "string"
+                "text": "HTMLSelectElement | any"
               },
-              "description": "Optional: Prefill the value of the search input",
-              "resolvedValue": {
-                "name": "searchValue",
-                "type": "string",
-                "comment": "Optional: Prefill the value of the search input",
-                "resolvedType": "string"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "selectedLabels",
+              "name": "selectAllRef",
               "type": {
-                "text": "string"
+                "text": "HTMLInputElement | any"
               },
-              "description": "Optional: If you want to show a custom label for the selected values.\nYou need to define the empty state as well based on selected options.",
-              "resolvedValue": {
-                "name": "selectedLabels",
-                "type": "string",
-                "comment": "Optional: If you want to show a custom label for the selected values.\nYou need to define the empty state as well based on selected options.",
-                "resolvedType": "string"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "transformSelectedLabels",
+              "name": "searchInputRef",
               "type": {
-                "text": "functiontype"
+                "text": "HTMLInputElement | any"
               },
-              "description": "Optional: If you want to show a custom label based on the selected options.",
-              "resolvedValue": {
-                "name": "transformSelectedLabels",
-                "type": "functiontype",
-                "comment": "Optional: If you want to show a custom label based on the selected options.",
-                "resolvedType": "functiontype"
-              }
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "selectedType",
+              "name": "id",
               "type": {
-                "text": "\"amount\" | \"text\" | \"tag\""
+                "text": "string"
               },
-              "description": "Change the selected type for values shown in multi select",
+              "description": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
               "resolvedValue": {
-                "name": "selectedType",
-                "type": "SelectedTypeType",
-                "comment": "Change the selected type for values shown in multi select",
-                "resolvedType": "\"amount\" | \"text\" | \"tag\""
+                "name": "id",
+                "type": "string",
+                "comment": "[ID](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id) of the component, generated automatically for some components as a fallback if unset.",
+                "resolvedType": "string"
               }
             },
             {
               "kind": "field",
-              "name": "amountText",
+              "name": "invalidMessage",
               "type": {
                 "text": "string"
               },
-              "description": "Optional: if select-type=\"amount\" change the shown text",
+              "description": "Helper message for invalid form components",
               "resolvedValue": {
-                "name": "amountText",
+                "name": "invalidMessage",
                 "type": "string",
-                "comment": "Optional: if select-type=\"amount\" change the shown text",
+                "comment": "Helper message for invalid form components",
                 "resolvedType": "string"
               }
             },
             {
               "kind": "field",
-              "name": "validMessage",
+              "name": "message",
               "type": {
                 "text": "string"
               },
-              "description": "Helper message for valid form components",
+              "description": "Optional helper message for form components",
               "resolvedValue": {
-                "name": "validMessage",
+                "name": "message",
                 "type": "string",
-                "comment": "Helper message for valid form components",
+                "comment": "Optional helper message for form components",
                 "resolvedType": "string"
               }
             },
             {
               "kind": "field",
-              "name": "required",
+              "name": "showMessage",
               "type": {
                 "text": "boolean | string"
               },
-              "description": "When the required attribute specified, the user will be required to fill the form element before submitting the form.\nThe form element will be marked semantically as required and by default also visually with an asterisk '*' next to the label (unless the property `showRequiredAsterisk` is also set with the value `false`).",
+              "description": "Enables or disables the visibility of the message.",
               "resolvedValue": {
-                "name": "required",
+                "name": "showMessage",
                 "type": {
                   "values": [
                     "boolean",
@@ -7425,107 +7896,343 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "When the required attribute specified, the user will be required to fill the form element before submitting the form.\nThe form element will be marked semantically as required and by default also visually with an asterisk '*' next to the label (unless the property `showRequiredAsterisk` is also set with the value `false`).",
+                "comment": "Enables or disables the visibility of the message.",
                 "resolvedType": "boolean | string"
               }
             },
             {
               "kind": "field",
-              "name": "selectAllLabel",
+              "name": "ariaDescribedBy",
               "type": {
                 "text": "string"
               },
-              "description": "Select all checkbox label",
+              "description": "Overwrites auto handling for aria-describedby.",
               "resolvedValue": {
-                "name": "selectAllLabel",
+                "name": "ariaDescribedBy",
                 "type": "string",
-                "comment": "Select all checkbox label",
+                "comment": "Overwrites auto handling for aria-describedby.",
                 "resolvedType": "string"
               }
             },
             {
               "kind": "field",
-              "name": "removeTagsTexts",
+              "name": "showNoResults",
               "type": {
-                "text": "string[]"
+                "text": "boolean"
               },
-              "description": "Optional: if you use selectedType=tag and options, you need to set the removeTagsTexts for screen reader users",
+              "description": "Dropdown - enable no options infotext",
               "resolvedValue": {
-                "name": "removeTagsTexts",
-                "type": "string[]",
-                "comment": "Optional: if you use selectedType=tag and options, you need to set the removeTagsTexts for screen reader users",
-                "resolvedType": "string[]"
+                "name": "showNoResults",
+                "type": "boolean",
+                "comment": "Dropdown - enable no options infotext",
+                "resolvedType": "boolean"
               }
             },
             {
               "kind": "field",
-              "name": "placement",
+              "name": "showLoading",
               "type": {
-                "text": "\"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\""
+                "text": "boolean"
               },
-              "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
+              "description": "Dropdown - enable loading infotext and spinner",
               "resolvedValue": {
-                "name": "placement",
-                "type": "PlacementVerticalType",
-                "comment": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
-                "resolvedType": "\"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\""
+                "name": "showLoading",
+                "type": "boolean",
+                "comment": "Dropdown - enable loading infotext and spinner",
+                "resolvedType": "boolean"
               }
             },
             {
               "kind": "field",
-              "name": "searchFilter",
+              "name": "multiple",
               "type": {
-                "text": "functiontype"
+                "text": "boolean | string"
               },
-              "description": "Optional: Change the filter function for the search input",
+              "description": "Enables CustomSelect",
               "resolvedValue": {
-                "name": "searchFilter",
-                "type": "functiontype",
-                "comment": "Optional: Change the filter function for the search input",
-                "resolvedType": "functiontype"
+                "name": "multiple",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "comment": "Enables CustomSelect",
+                "resolvedType": "boolean | string"
               }
             },
             {
               "kind": "field",
-              "name": "className",
+              "name": "showSelectAll",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "description": "React specific for adding className to the component.",
+              "description": "Forces select all checkbox (only for multiple).",
               "resolvedValue": {
-                "name": "className",
-                "type": "string",
-                "comment": "React specific for adding className to the component.",
-                "resolvedType": "string"
+                "name": "showSelectAll",
+                "type": "boolean",
+                "comment": "Forces select all checkbox (only for multiple).",
+                "resolvedType": "boolean"
               }
             },
             {
               "kind": "field",
-              "name": "formFieldWidth",
+              "name": "showSearch",
               "type": {
-                "text": "\"full\" | \"auto\" | string"
+                "text": "boolean"
               },
-              "description": "Width of the component. Auto width based on children size, full width based on parent elements width.",
+              "description": "Forces search in header.",
               "resolvedValue": {
-                "name": "formFieldWidth",
-                "type": {
-                  "values": [
-                    "WidthType",
-                    "string"
-                  ],
-                  "type": "union"
-                },
-                "comment": "Width of the component. Auto width based on children size, full width based on parent elements width.",
-                "resolvedType": "\"full\" | \"auto\" | string"
+                "name": "showSearch",
+                "type": "boolean",
+                "comment": "Forces search in header.",
+                "resolvedType": "boolean"
               }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "values",
               "type": {
-                "text": "\"above\" | \"floating\""
+                "text": "string[]"
               },
-              "description": "Change the variant of the label to float or hidden",
+              "description": "Initial value for multi select",
+              "resolvedValue": {
+                "name": "values",
+                "type": "string[]",
+                "comment": "Initial value for multi select",
+                "resolvedType": "string[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validation",
+              "type": {
+                "text": "\"invalid\" | \"valid\" | \"no-validation\""
+              },
+              "description": "Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.",
+              "resolvedValue": {
+                "name": "validation",
+                "type": "ValidationType",
+                "comment": "Marks an input element as invalid (red) / valid (green) / no-validation (grey). Overwrites the :user-valid selector.",
+                "resolvedType": "\"invalid\" | \"valid\" | \"no-validation\""
+              }
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "CustomSelectOptionType[]"
+              },
+              "description": "You should pass in the options as an array.",
+              "resolvedValue": {
+                "name": "options",
+                "type": "CustomSelectOptionType[]",
+                "comment": "You should pass in the options as an array.",
+                "resolvedType": "CustomSelectOptionType[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "searchValue",
+              "type": {
+                "text": "string"
+              },
+              "description": "Optional: Prefill the value of the search input",
+              "resolvedValue": {
+                "name": "searchValue",
+                "type": "string",
+                "comment": "Optional: Prefill the value of the search input",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selectedLabels",
+              "type": {
+                "text": "string"
+              },
+              "description": "Optional: If you want to show a custom label for the selected values.\nYou need to define the empty state as well based on selected options.",
+              "resolvedValue": {
+                "name": "selectedLabels",
+                "type": "string",
+                "comment": "Optional: If you want to show a custom label for the selected values.\nYou need to define the empty state as well based on selected options.",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "transformSelectedLabels",
+              "type": {
+                "text": "functiontype"
+              },
+              "description": "Optional: If you want to show a custom label based on the selected options.",
+              "resolvedValue": {
+                "name": "transformSelectedLabels",
+                "type": "functiontype",
+                "comment": "Optional: If you want to show a custom label based on the selected options.",
+                "resolvedType": "functiontype"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selectedType",
+              "type": {
+                "text": "\"amount\" | \"text\" | \"tag\""
+              },
+              "description": "Change the selected type for values shown in multi select",
+              "resolvedValue": {
+                "name": "selectedType",
+                "type": "SelectedTypeType",
+                "comment": "Change the selected type for values shown in multi select",
+                "resolvedType": "\"amount\" | \"text\" | \"tag\""
+              }
+            },
+            {
+              "kind": "field",
+              "name": "amountText",
+              "type": {
+                "text": "string"
+              },
+              "description": "Optional: if select-type=\"amount\" change the shown text",
+              "resolvedValue": {
+                "name": "amountText",
+                "type": "string",
+                "comment": "Optional: if select-type=\"amount\" change the shown text",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validMessage",
+              "type": {
+                "text": "string"
+              },
+              "description": "Helper message for valid form components",
+              "resolvedValue": {
+                "name": "validMessage",
+                "type": "string",
+                "comment": "Helper message for valid form components",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean | string"
+              },
+              "description": "When the required attribute specified, the user will be required to fill the form element before submitting the form.\nThe form element will be marked semantically as required and by default also visually with an asterisk '*' next to the label (unless the property `showRequiredAsterisk` is also set with the value `false`).",
+              "resolvedValue": {
+                "name": "required",
+                "type": {
+                  "values": [
+                    "boolean",
+                    "string"
+                  ],
+                  "type": "literal"
+                },
+                "comment": "When the required attribute specified, the user will be required to fill the form element before submitting the form.\nThe form element will be marked semantically as required and by default also visually with an asterisk '*' next to the label (unless the property `showRequiredAsterisk` is also set with the value `false`).",
+                "resolvedType": "boolean | string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "selectAllLabel",
+              "type": {
+                "text": "string"
+              },
+              "description": "Select all checkbox label",
+              "resolvedValue": {
+                "name": "selectAllLabel",
+                "type": "string",
+                "comment": "Select all checkbox label",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "removeTagsTexts",
+              "type": {
+                "text": "string[]"
+              },
+              "description": "Optional: if you use selectedType=tag and options, you need to set the removeTagsTexts for screen reader users",
+              "resolvedValue": {
+                "name": "removeTagsTexts",
+                "type": "string[]",
+                "comment": "Optional: if you use selectedType=tag and options, you need to set the removeTagsTexts for screen reader users",
+                "resolvedType": "string[]"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "placement",
+              "type": {
+                "text": "\"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\""
+              },
+              "description": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
+              "resolvedValue": {
+                "name": "placement",
+                "type": "PlacementVerticalType",
+                "comment": "The `placement` attributes values change the position to absolute and adds a transform based on the placement.",
+                "resolvedType": "\"top\" | \"bottom\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\""
+              }
+            },
+            {
+              "kind": "field",
+              "name": "searchFilter",
+              "type": {
+                "text": "functiontype"
+              },
+              "description": "Optional: Change the filter function for the search input",
+              "resolvedValue": {
+                "name": "searchFilter",
+                "type": "functiontype",
+                "comment": "Optional: Change the filter function for the search input",
+                "resolvedType": "functiontype"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "className",
+              "type": {
+                "text": "string"
+              },
+              "description": "React specific for adding className to the component.",
+              "resolvedValue": {
+                "name": "className",
+                "type": "string",
+                "comment": "React specific for adding className to the component.",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "formFieldWidth",
+              "type": {
+                "text": "\"full\" | \"auto\" | string"
+              },
+              "description": "Width of the component. Auto width based on children size, full width based on parent elements width.",
+              "resolvedValue": {
+                "name": "formFieldWidth",
+                "type": {
+                  "values": [
+                    "WidthType",
+                    "string"
+                  ],
+                  "type": "union"
+                },
+                "comment": "Width of the component. Auto width based on children size, full width based on parent elements width.",
+                "resolvedType": "\"full\" | \"auto\" | string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"above\" | \"floating\""
+              },
+              "description": "Change the variant of the label to float or hidden",
               "resolvedValue": {
                 "name": "variant",
                 "type": "LabelVariantType",
@@ -7761,29 +8468,29 @@
             },
             {
               "kind": "field",
-              "name": "loadingText",
+              "name": "noResultsText",
               "type": {
                 "text": "string"
               },
-              "description": "Dropdown - hint if data has to be loaded",
+              "description": "Dropdown - hint if there are no options",
               "resolvedValue": {
-                "name": "loadingText",
+                "name": "noResultsText",
                 "type": "string",
-                "comment": "Dropdown - hint if data has to be loaded",
+                "comment": "Dropdown - hint if there are no options",
                 "resolvedType": "string"
               }
             },
             {
               "kind": "field",
-              "name": "noResultsText",
+              "name": "loadingText",
               "type": {
                 "text": "string"
               },
-              "description": "Dropdown - hint if there are no options",
+              "description": "Dropdown - hint if data has to be loaded",
               "resolvedValue": {
-                "name": "noResultsText",
+                "name": "loadingText",
                 "type": "string",
-                "comment": "Dropdown - hint if there are no options",
+                "comment": "Dropdown - hint if data has to be loaded",
                 "resolvedType": "string"
               }
             },
@@ -9114,30 +9821,30 @@
               }
             },
             {
-              "name": "loading-text",
-              "fieldName": "loadingText",
+              "name": "no-results-text",
+              "fieldName": "noResultsText",
               "type": {
                 "text": "string"
               },
-              "description": "Dropdown - hint if data has to be loaded",
+              "description": "Dropdown - hint if there are no options",
               "resolvedValue": {
-                "name": "loadingText",
+                "name": "noResultsText",
                 "type": "string",
-                "comment": "Dropdown - hint if data has to be loaded",
+                "comment": "Dropdown - hint if there are no options",
                 "resolvedType": "string"
               }
             },
             {
-              "name": "no-results-text",
-              "fieldName": "noResultsText",
+              "name": "loading-text",
+              "fieldName": "loadingText",
               "type": {
                 "text": "string"
               },
-              "description": "Dropdown - hint if there are no options",
+              "description": "Dropdown - hint if data has to be loaded",
               "resolvedValue": {
-                "name": "noResultsText",
+                "name": "loadingText",
                 "type": "string",
-                "comment": "Dropdown - hint if there are no options",
+                "comment": "Dropdown - hint if data has to be loaded",
                 "resolvedType": "string"
               }
             },
@@ -12150,20 +12857,6 @@
                 "resolvedType": "string"
               }
             },
-            {
-              "kind": "field",
-              "name": "ariaLive",
-              "type": {
-                "text": "\"assertive\" | \"polite\" | \"off\""
-              },
-              "description": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
-              "resolvedValue": {
-                "name": "ariaLive",
-                "type": "NotificationAriaLiveType",
-                "comment": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
-                "resolvedType": "\"assertive\" | \"polite\" | \"off\""
-              }
-            },
             {
               "kind": "field",
               "name": "semantic",
@@ -12178,6 +12871,34 @@
                 "resolvedType": "\"adaptive\" | \"neutral\" | \"critical\" | \"informational\" | \"warning\" | \"successful\""
               }
             },
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).",
+              "resolvedValue": {
+                "name": "role",
+                "type": "string",
+                "comment": "Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaLive",
+              "type": {
+                "text": "\"assertive\" | \"polite\" | \"off\""
+              },
+              "description": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
+              "resolvedValue": {
+                "name": "ariaLive",
+                "type": "NotificationAriaLiveType",
+                "comment": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
+                "resolvedType": "\"assertive\" | \"polite\" | \"off\""
+              }
+            },
             {
               "kind": "field",
               "name": "variant",
@@ -12445,20 +13166,6 @@
                 "resolvedType": "string"
               }
             },
-            {
-              "name": "aria-live",
-              "fieldName": "ariaLive",
-              "type": {
-                "text": "\"assertive\" | \"polite\" | \"off\""
-              },
-              "description": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
-              "resolvedValue": {
-                "name": "ariaLive",
-                "type": "NotificationAriaLiveType",
-                "comment": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
-                "resolvedType": "\"assertive\" | \"polite\" | \"off\""
-              }
-            },
             {
               "name": "semantic",
               "fieldName": "semantic",
@@ -12473,6 +13180,34 @@
                 "resolvedType": "\"adaptive\" | \"neutral\" | \"critical\" | \"informational\" | \"warning\" | \"successful\""
               }
             },
+            {
+              "name": "role",
+              "fieldName": "role",
+              "type": {
+                "text": "string"
+              },
+              "description": "Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).",
+              "resolvedValue": {
+                "name": "role",
+                "type": "string",
+                "comment": "Sets aria role based on [`aria-role`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles).",
+                "resolvedType": "string"
+              }
+            },
+            {
+              "name": "aria-live",
+              "fieldName": "ariaLive",
+              "type": {
+                "text": "\"assertive\" | \"polite\" | \"off\""
+              },
+              "description": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
+              "resolvedValue": {
+                "name": "ariaLive",
+                "type": "NotificationAriaLiveType",
+                "comment": "The arialive attribute will lead to that the screenreader interrupts immediately\nand reads out the notification if set to \"assertive\", while it will wait for the\nuser's idleness when set to \"polite\", compare to [aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-live)",
+                "resolvedType": "\"assertive\" | \"polite\" | \"off\""
+              }
+            },
             {
               "name": "variant",
               "fieldName": "variant",
@@ -13087,9 +13822,7 @@
             {
               "kind": "field",
               "name": "animation",
-              "type": {
-                "text": "boolean | string"
-              },
+              "type": {},
               "description": "Disable animation",
               "resolvedValue": {
                 "name": "animation",
@@ -13100,8 +13833,7 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "Disable animation",
-                "resolvedType": "boolean | string"
+                "comment": "Disable animation"
               }
             },
             {
@@ -13130,26 +13862,23 @@
               "type": {
                 "text": "\"none\" | \"slow\" | \"fast\""
               },
-              "description": "Add a delay before showing the tooltip",
+              "description": "Add a delay before showing the component",
               "resolvedValue": {
                 "name": "delay",
                 "type": "PopoverDelayType",
-                "comment": "Add a delay before showing the tooltip",
+                "comment": "Add a delay before showing the component",
                 "resolvedType": "\"none\" | \"slow\" | \"fast\""
               }
             },
             {
               "kind": "field",
               "name": "width",
-              "type": {
-                "text": "\"auto\" | \"fixed\""
-              },
+              "type": {},
               "description": "Use fixed with for default max-width",
               "resolvedValue": {
                 "name": "width",
                 "type": "PopoverWidthType",
-                "comment": "Use fixed with for default max-width",
-                "resolvedType": "\"auto\" | \"fixed\""
+                "comment": "Use fixed with for default max-width"
               }
             },
             {
@@ -13356,9 +14085,7 @@
             {
               "name": "animation",
               "fieldName": "animation",
-              "type": {
-                "text": "boolean | string"
-              },
+              "type": {},
               "description": "Disable animation",
               "resolvedValue": {
                 "name": "animation",
@@ -13369,8 +14096,7 @@
                   ],
                   "type": "literal"
                 },
-                "comment": "Disable animation",
-                "resolvedType": "boolean | string"
+                "comment": "Disable animation"
               }
             },
             {
@@ -13399,26 +14125,23 @@
               "type": {
                 "text": "\"none\" | \"slow\" | \"fast\""
               },
-              "description": "Add a delay before showing the tooltip",
+              "description": "Add a delay before showing the component",
               "resolvedValue": {
                 "name": "delay",
                 "type": "PopoverDelayType",
-                "comment": "Add a delay before showing the tooltip",
+                "comment": "Add a delay before showing the component",
                 "resolvedType": "\"none\" | \"slow\" | \"fast\""
               }
             },
             {
               "name": "width",
               "fieldName": "width",
-              "type": {
-                "text": "\"auto\" | \"fixed\""
-              },
+              "type": {},
               "description": "Use fixed with for default max-width",
               "resolvedValue": {
                 "name": "width",
                 "type": "PopoverWidthType",
-                "comment": "Use fixed with for default max-width",
-                "resolvedType": "\"auto\" | \"fixed\""
+                "comment": "Use fixed with for default max-width"
               }
             }
           ],
@@ -14400,20 +15123,6 @@
                 "resolvedType": "boolean | string"
               }
             },
-            {
-              "kind": "field",
-              "name": "className",
-              "type": {
-                "text": "string"
-              },
-              "description": "React specific for adding className to the component.",
-              "resolvedValue": {
-                "name": "className",
-                "type": "string",
-                "comment": "React specific for adding className to the component.",
-                "resolvedType": "string"
-              }
-            },
             {
               "kind": "field",
               "name": "variant",
@@ -14428,6 +15137,34 @@
                 "resolvedType": "\"above\" | \"floating\""
               }
             },
+            {
+              "kind": "field",
+              "name": "showEmptyOption",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.\nBy default, it is shown for non-required selects and hidden for required selects.\nSet to `true` to always show or `false` to always hide the empty option.\n\nNote: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.\nSetting `showEmptyOption` alone has no effect if neither of these conditions is met.",
+              "resolvedValue": {
+                "name": "showEmptyOption",
+                "type": "boolean",
+                "comment": "Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.\nBy default, it is shown for non-required selects and hidden for required selects.\nSet to `true` to always show or `false` to always hide the empty option.\n\nNote: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.\nSetting `showEmptyOption` alone has no effect if neither of these conditions is met.",
+                "resolvedType": "boolean"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "className",
+              "type": {
+                "text": "string"
+              },
+              "description": "React specific for adding className to the component.",
+              "resolvedValue": {
+                "name": "className",
+                "type": "string",
+                "comment": "React specific for adding className to the component.",
+                "resolvedType": "string"
+              }
+            },
             {
               "kind": "field",
               "name": "showLabel",
@@ -14801,6 +15538,10 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "shouldShowEmptyOption"
+            },
             {
               "kind": "method",
               "name": "enableAttributePassing",
@@ -14999,20 +15740,6 @@
                 "resolvedType": "boolean | string"
               }
             },
-            {
-              "name": "classname",
-              "fieldName": "className",
-              "type": {
-                "text": "string"
-              },
-              "description": "React specific for adding className to the component.",
-              "resolvedValue": {
-                "name": "className",
-                "type": "string",
-                "comment": "React specific for adding className to the component.",
-                "resolvedType": "string"
-              }
-            },
             {
               "name": "variant",
               "fieldName": "variant",
@@ -15027,6 +15754,34 @@
                 "resolvedType": "\"above\" | \"floating\""
               }
             },
+            {
+              "name": "show-empty-option",
+              "fieldName": "showEmptyOption",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.\nBy default, it is shown for non-required selects and hidden for required selects.\nSet to `true` to always show or `false` to always hide the empty option.\n\nNote: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.\nSetting `showEmptyOption` alone has no effect if neither of these conditions is met.",
+              "resolvedValue": {
+                "name": "showEmptyOption",
+                "type": "boolean",
+                "comment": "Controls whether the empty placeholder option is shown in the dropdown after the user's selection of another option.\nBy default, it is shown for non-required selects and hidden for required selects.\nSet to `true` to always show or `false` to always hide the empty option.\n\nNote: The empty option is only rendered when `variant === 'floating'` or a `placeholder` is set.\nSetting `showEmptyOption` alone has no effect if neither of these conditions is met.",
+                "resolvedType": "boolean"
+              }
+            },
+            {
+              "name": "classname",
+              "fieldName": "className",
+              "type": {
+                "text": "string"
+              },
+              "description": "React specific for adding className to the component.",
+              "resolvedValue": {
+                "name": "className",
+                "type": "string",
+                "comment": "React specific for adding className to the component.",
+                "resolvedType": "string"
+              }
+            },
             {
               "name": "show-label",
               "fieldName": "showLabel",
@@ -19468,11 +20223,909 @@
               "name": "label",
               "fieldName": "label",
               "type": {
-                "text": "any"
+                "text": "any"
+              }
+            }
+          ],
+          "tagName": "card-wrapper-showcase",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CardWrapperShowcase",
+          "declaration": {
+            "name": "CardWrapperShowcase",
+            "module": "src/shared/showcase/card-wrapper.showcase.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "card-wrapper-showcase",
+          "declaration": {
+            "name": "CardWrapperShowcase",
+            "module": "src/shared/showcase/card-wrapper.showcase.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "container-wrapper.showcase.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ContainerWrapperShowcase",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isSubComponent",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isPatternhub",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hidden",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "getSourceFilePath",
+              "default": "function getSourceFilePath(): string | undefined { if (!this.title) return; const componentName = this.title ?.replace(/^DB/, \"\") .replaceAll(/([A-Z])/g, (match, letter, index) => index > 0 ? `-${letter.toLowerCase()}` : letter.toLowerCase() ); if (componentName && /^[a-z]+(-[a-z]+)*$/.test(componentName)) { return `packages/components/src/components/${componentName}/${componentName}.lite.tsx`; } return; }"
+            },
+            {
+              "kind": "field",
+              "name": "getGitHubSourceUrl",
+              "default": "function getGitHubSourceUrl(): string | undefined { const filePath = this.getSourceFilePath(); if (!filePath) return; const targetBranch = process.env[\"GITHUB_BRANCH\"] ?? process.env[\"BRANCH_NAME\"] ?? \"main\"; return `https://github.com/db-ux-design-system/core-web/blob/${targetBranch}/${filePath}`; }"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "fieldName": "title",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "is-sub-component",
+              "fieldName": "isSubComponent",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "name": "is-patternhub",
+              "fieldName": "isPatternhub",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "tagName": "container-wrapper-showcase",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ContainerWrapperShowcase",
+          "declaration": {
+            "name": "ContainerWrapperShowcase",
+            "module": "src/shared/showcase/container-wrapper.showcase.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "container-wrapper-showcase",
+          "declaration": {
+            "name": "ContainerWrapperShowcase",
+            "module": "src/shared/showcase/container-wrapper.showcase.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "link-wrapper.showcase.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "LinkWrapperShowcase",
+          "members": [
+            {
+              "kind": "field",
+              "name": "exampleName",
+              "type": {
+                "text": "any"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "pageParam",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "getPage",
+              "default": "function getPage(): string | undefined { return this.exampleName?.replaceAll(\" \", \"+\").toLowerCase(); }"
+            },
+            {
+              "kind": "field",
+              "name": "getHref",
+              "default": "function getHref(): string { if (typeof window !== \"undefined\") { const hash = window.location.hash; const basePath = hash.includes(\"?\") ? hash.split(\"?\")[0] : hash; return `${basePath}?page=${this.getPage()}`; } return \"\"; }"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "example-name",
+              "fieldName": "exampleName",
+              "type": {
+                "text": "any"
+              }
+            }
+          ],
+          "tagName": "link-wrapper-showcase",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "LinkWrapperShowcase",
+          "declaration": {
+            "name": "LinkWrapperShowcase",
+            "module": "src/shared/showcase/link-wrapper.showcase.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "link-wrapper-showcase",
+          "declaration": {
+            "name": "LinkWrapperShowcase",
+            "module": "src/shared/showcase/link-wrapper.showcase.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "density.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonDensity",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "button-density",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonDensity",
+          "declaration": {
+            "name": "ButtonDensity",
+            "module": "src/components/button/examples/density.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-density",
+          "declaration": {
+            "name": "ButtonDensity",
+            "module": "src/components/button/examples/density.example.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "disabled.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonDisabled",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "button-disabled",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonDisabled",
+          "declaration": {
+            "name": "ButtonDisabled",
+            "module": "src/components/button/examples/disabled.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-disabled",
+          "declaration": {
+            "name": "ButtonDisabled",
+            "module": "src/components/button/examples/disabled.example.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "multi-line-text.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonMultiLineText",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "button-multi-line-text",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonMultiLineText",
+          "declaration": {
+            "name": "ButtonMultiLineText",
+            "module": "src/components/button/examples/multi-line-text.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-multi-line-text",
+          "declaration": {
+            "name": "ButtonMultiLineText",
+            "module": "src/components/button/examples/multi-line-text.example.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "no-text.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonNoText",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "button-no-text",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonNoText",
+          "declaration": {
+            "name": "ButtonNoText",
+            "module": "src/components/button/examples/no-text.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-no-text",
+          "declaration": {
+            "name": "ButtonNoText",
+            "module": "src/components/button/examples/no-text.example.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "show-icon-leading.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonShowIconLeading",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "button-show-icon-leading",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonShowIconLeading",
+          "declaration": {
+            "name": "ButtonShowIconLeading",
+            "module": "src/components/button/examples/show-icon-leading.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-show-icon-leading",
+          "declaration": {
+            "name": "ButtonShowIconLeading",
+            "module": "src/components/button/examples/show-icon-leading.example.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "show-icon-trailing.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonShowIconTrailing",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "button-show-icon-trailing",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonShowIconTrailing",
+          "declaration": {
+            "name": "ButtonShowIconTrailing",
+            "module": "src/components/button/examples/show-icon-trailing.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-show-icon-trailing",
+          "declaration": {
+            "name": "ButtonShowIconTrailing",
+            "module": "src/components/button/examples/show-icon-trailing.example.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "size.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonSize",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "button-size",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonSize",
+          "declaration": {
+            "name": "ButtonSize",
+            "module": "src/components/button/examples/size.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-size",
+          "declaration": {
+            "name": "ButtonSize",
+            "module": "src/components/button/examples/size.example.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "variant.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonVariant",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "button-variant",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonVariant",
+          "declaration": {
+            "name": "ButtonVariant",
+            "module": "src/components/button/examples/variant.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-variant",
+          "declaration": {
+            "name": "ButtonVariant",
+            "module": "src/components/button/examples/variant.example.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "width.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonWidth",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "button-width",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ButtonWidth",
+          "declaration": {
+            "name": "ButtonWidth",
+            "module": "src/components/button/examples/width.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "button-width",
+          "declaration": {
+            "name": "ButtonWidth",
+            "module": "src/components/button/examples/width.example.tsx"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "button.showcase.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ButtonShowcase",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "isPatternhub",
+              "type": {
+                "text": "PatternhubProps[\"isPatternhub\"]"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "is-patternhub",
+              "fieldName": "isPatternhub",
+              "type": {
+                "text": "PatternhubProps[\"isPatternhub\"]"
               }
             }
           ],
-          "tagName": "card-wrapper-showcase",
+          "tagName": "button-showcase",
           "events": [],
           "customElement": true
         }
@@ -19480,30 +21133,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "CardWrapperShowcase",
+          "name": "ButtonShowcase",
           "declaration": {
-            "name": "CardWrapperShowcase",
-            "module": "src/shared/showcase/card-wrapper.showcase.tsx"
+            "name": "ButtonShowcase",
+            "module": "src/components/button/showcase/button.showcase.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "card-wrapper-showcase",
+          "name": "button-showcase",
           "declaration": {
-            "name": "CardWrapperShowcase",
-            "module": "src/shared/showcase/card-wrapper.showcase.tsx"
+            "name": "ButtonShowcase",
+            "module": "src/components/button/showcase/button.showcase.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "container-wrapper.showcase.tsx",
+      "path": "button.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ContainerWrapperShowcase",
+          "name": "LoadingIndicatorButton",
           "members": [
             {
               "kind": "field",
@@ -19513,45 +21166,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isSubComponent",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isPatternhub",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "hidden",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "getSourceFilePath",
-              "default": "function getSourceFilePath(): string | undefined { if (!this.title) return; const componentName = this.title ?.replace(/^DB/, \"\") .replaceAll(/([A-Z])/g, (match, letter, index) => index > 0 ? `-${letter.toLowerCase()}` : letter.toLowerCase() ); if (componentName && /^[a-z]+(-[a-z]+)*$/.test(componentName)) { return `packages/components/src/components/${componentName}/${componentName}.lite.tsx`; } return; }"
-            },
-            {
-              "kind": "field",
-              "name": "getGitHubSourceUrl",
-              "default": "function getGitHubSourceUrl(): string | undefined { const filePath = this.getSourceFilePath(); if (!filePath) return; const targetBranch = process.env[\"GITHUB_BRANCH\"] ?? process.env[\"BRANCH_NAME\"] ?? \"main\"; return `https://github.com/db-ux-design-system/core-web/blob/${targetBranch}/${filePath}`; }"
-            },
             {
               "kind": "method",
               "name": "enableAttributePassing",
@@ -19579,30 +21193,7 @@
               "name": "render"
             }
           ],
-          "attributes": [
-            {
-              "name": "title",
-              "fieldName": "title",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "name": "is-sub-component",
-              "fieldName": "isSubComponent",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "name": "is-patternhub",
-              "fieldName": "isPatternhub",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "tagName": "container-wrapper-showcase",
+          "tagName": "loading-indicator-button",
           "events": [],
           "customElement": true
         }
@@ -19610,71 +21201,67 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ContainerWrapperShowcase",
+          "name": "LoadingIndicatorButton",
           "declaration": {
-            "name": "ContainerWrapperShowcase",
-            "module": "src/shared/showcase/container-wrapper.showcase.tsx"
+            "name": "LoadingIndicatorButton",
+            "module": "src/components/loading-indicator/examples/button.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "container-wrapper-showcase",
+          "name": "loading-indicator-button",
           "declaration": {
-            "name": "ContainerWrapperShowcase",
-            "module": "src/shared/showcase/container-wrapper.showcase.tsx"
+            "name": "LoadingIndicatorButton",
+            "module": "src/components/loading-indicator/examples/button.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "link-wrapper.showcase.tsx",
+      "path": "delay.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "LinkWrapperShowcase",
+          "name": "LoadingIndicatorDelay",
           "members": [
             {
               "kind": "field",
-              "name": "exampleName",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "pageParam",
+              "name": "_ref",
               "type": {
-                "text": "null"
+                "text": "HTMLElement"
               },
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "getPage",
-              "default": "function getPage(): string | undefined { return this.exampleName?.replaceAll(\" \", \"+\").toLowerCase(); }"
+              "privacy": "private"
             },
             {
-              "kind": "field",
-              "name": "getHref",
-              "default": "function getHref(): string { if (typeof window !== \"undefined\") { const hash = window.location.hash; const basePath = hash.includes(\"?\") ? hash.split(\"?\")[0] : hash; return `${basePath}?page=${this.getPage()}`; } return \"\"; }"
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
             },
             {
               "kind": "method",
               "name": "render"
             }
           ],
-          "attributes": [
-            {
-              "name": "example-name",
-              "fieldName": "exampleName",
-              "type": {
-                "text": "any"
-              }
-            }
-          ],
-          "tagName": "link-wrapper-showcase",
+          "tagName": "loading-indicator-delay",
           "events": [],
           "customElement": true
         }
@@ -19682,18 +21269,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "LinkWrapperShowcase",
+          "name": "LoadingIndicatorDelay",
           "declaration": {
-            "name": "LinkWrapperShowcase",
-            "module": "src/shared/showcase/link-wrapper.showcase.tsx"
+            "name": "LoadingIndicatorDelay",
+            "module": "src/components/loading-indicator/examples/delay.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "link-wrapper-showcase",
+          "name": "loading-indicator-delay",
           "declaration": {
-            "name": "LinkWrapperShowcase",
-            "module": "src/shared/showcase/link-wrapper.showcase.tsx"
+            "name": "LoadingIndicatorDelay",
+            "module": "src/components/loading-indicator/examples/delay.example.tsx"
           }
         }
       ]
@@ -19705,7 +21292,7 @@
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonDensity",
+          "name": "LoadingIndicatorDensity",
           "members": [
             {
               "kind": "field",
@@ -19742,7 +21329,7 @@
               "name": "render"
             }
           ],
-          "tagName": "button-density",
+          "tagName": "loading-indicator-density",
           "events": [],
           "customElement": true
         }
@@ -19750,30 +21337,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonDensity",
+          "name": "LoadingIndicatorDensity",
           "declaration": {
-            "name": "ButtonDensity",
-            "module": "src/components/button/examples/density.example.tsx"
+            "name": "LoadingIndicatorDensity",
+            "module": "src/components/loading-indicator/examples/density.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-density",
+          "name": "loading-indicator-density",
           "declaration": {
-            "name": "ButtonDensity",
-            "module": "src/components/button/examples/density.example.tsx"
+            "name": "LoadingIndicatorDensity",
+            "module": "src/components/loading-indicator/examples/density.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "disabled.example.tsx",
+      "path": "indeterminate.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonDisabled",
+          "name": "LoadingIndicatorIndeterminate",
           "members": [
             {
               "kind": "field",
@@ -19810,7 +21397,7 @@
               "name": "render"
             }
           ],
-          "tagName": "button-disabled",
+          "tagName": "loading-indicator-indeterminate",
           "events": [],
           "customElement": true
         }
@@ -19818,30 +21405,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonDisabled",
+          "name": "LoadingIndicatorIndeterminate",
           "declaration": {
-            "name": "ButtonDisabled",
-            "module": "src/components/button/examples/disabled.example.tsx"
+            "name": "LoadingIndicatorIndeterminate",
+            "module": "src/components/loading-indicator/examples/indeterminate.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-disabled",
+          "name": "loading-indicator-indeterminate",
           "declaration": {
-            "name": "ButtonDisabled",
-            "module": "src/components/button/examples/disabled.example.tsx"
+            "name": "LoadingIndicatorIndeterminate",
+            "module": "src/components/loading-indicator/examples/indeterminate.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "multi-line-text.example.tsx",
+      "path": "overlay.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonMultiLineText",
+          "name": "LoadingIndicatorOverlay",
           "members": [
             {
               "kind": "field",
@@ -19878,7 +21465,7 @@
               "name": "render"
             }
           ],
-          "tagName": "button-multi-line-text",
+          "tagName": "loading-indicator-overlay",
           "events": [],
           "customElement": true
         }
@@ -19886,30 +21473,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonMultiLineText",
+          "name": "LoadingIndicatorOverlay",
           "declaration": {
-            "name": "ButtonMultiLineText",
-            "module": "src/components/button/examples/multi-line-text.example.tsx"
+            "name": "LoadingIndicatorOverlay",
+            "module": "src/components/loading-indicator/examples/overlay.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-multi-line-text",
+          "name": "loading-indicator-overlay",
           "declaration": {
-            "name": "ButtonMultiLineText",
-            "module": "src/components/button/examples/multi-line-text.example.tsx"
+            "name": "LoadingIndicatorOverlay",
+            "module": "src/components/loading-indicator/examples/overlay.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "no-text.example.tsx",
+      "path": "show-label.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonNoText",
+          "name": "LoadingIndicatorShowLabel",
           "members": [
             {
               "kind": "field",
@@ -19946,7 +21533,7 @@
               "name": "render"
             }
           ],
-          "tagName": "button-no-text",
+          "tagName": "loading-indicator-show-label",
           "events": [],
           "customElement": true
         }
@@ -19954,30 +21541,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonNoText",
+          "name": "LoadingIndicatorShowLabel",
           "declaration": {
-            "name": "ButtonNoText",
-            "module": "src/components/button/examples/no-text.example.tsx"
+            "name": "LoadingIndicatorShowLabel",
+            "module": "src/components/loading-indicator/examples/show-label.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-no-text",
+          "name": "loading-indicator-show-label",
           "declaration": {
-            "name": "ButtonNoText",
-            "module": "src/components/button/examples/no-text.example.tsx"
+            "name": "LoadingIndicatorShowLabel",
+            "module": "src/components/loading-indicator/examples/show-label.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "show-icon-leading.example.tsx",
+      "path": "show-progress-text.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonShowIconLeading",
+          "name": "LoadingIndicatorShowProgressText",
           "members": [
             {
               "kind": "field",
@@ -20014,7 +21601,7 @@
               "name": "render"
             }
           ],
-          "tagName": "button-show-icon-leading",
+          "tagName": "loading-indicator-show-progress-text",
           "events": [],
           "customElement": true
         }
@@ -20022,30 +21609,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonShowIconLeading",
+          "name": "LoadingIndicatorShowProgressText",
           "declaration": {
-            "name": "ButtonShowIconLeading",
-            "module": "src/components/button/examples/show-icon-leading.example.tsx"
+            "name": "LoadingIndicatorShowProgressText",
+            "module": "src/components/loading-indicator/examples/show-progress-text.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-show-icon-leading",
+          "name": "loading-indicator-show-progress-text",
           "declaration": {
-            "name": "ButtonShowIconLeading",
-            "module": "src/components/button/examples/show-icon-leading.example.tsx"
+            "name": "LoadingIndicatorShowProgressText",
+            "module": "src/components/loading-indicator/examples/show-progress-text.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "show-icon-trailing.example.tsx",
+      "path": "size.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonShowIconTrailing",
+          "name": "LoadingIndicatorSize",
           "members": [
             {
               "kind": "field",
@@ -20082,7 +21669,7 @@
               "name": "render"
             }
           ],
-          "tagName": "button-show-icon-trailing",
+          "tagName": "loading-indicator-size",
           "events": [],
           "customElement": true
         }
@@ -20090,30 +21677,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonShowIconTrailing",
+          "name": "LoadingIndicatorSize",
           "declaration": {
-            "name": "ButtonShowIconTrailing",
-            "module": "src/components/button/examples/show-icon-trailing.example.tsx"
+            "name": "LoadingIndicatorSize",
+            "module": "src/components/loading-indicator/examples/size.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-show-icon-trailing",
+          "name": "loading-indicator-size",
           "declaration": {
-            "name": "ButtonShowIconTrailing",
-            "module": "src/components/button/examples/show-icon-trailing.example.tsx"
+            "name": "LoadingIndicatorSize",
+            "module": "src/components/loading-indicator/examples/size.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "size.example.tsx",
+      "path": "state.determinate.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonSize",
+          "name": "LoadingIndicatorStateDeterminate",
           "members": [
             {
               "kind": "field",
@@ -20150,7 +21737,7 @@
               "name": "render"
             }
           ],
-          "tagName": "button-size",
+          "tagName": "loading-indicator-state-determinate",
           "events": [],
           "customElement": true
         }
@@ -20158,30 +21745,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonSize",
+          "name": "LoadingIndicatorStateDeterminate",
           "declaration": {
-            "name": "ButtonSize",
-            "module": "src/components/button/examples/size.example.tsx"
+            "name": "LoadingIndicatorStateDeterminate",
+            "module": "src/components/loading-indicator/examples/state.determinate.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-size",
+          "name": "loading-indicator-state-determinate",
           "declaration": {
-            "name": "ButtonSize",
-            "module": "src/components/button/examples/size.example.tsx"
+            "name": "LoadingIndicatorStateDeterminate",
+            "module": "src/components/loading-indicator/examples/state.determinate.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "variant.example.tsx",
+      "path": "state.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonVariant",
+          "name": "LoadingIndicatorState",
           "members": [
             {
               "kind": "field",
@@ -20218,7 +21805,7 @@
               "name": "render"
             }
           ],
-          "tagName": "button-variant",
+          "tagName": "loading-indicator-state",
           "events": [],
           "customElement": true
         }
@@ -20226,30 +21813,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonVariant",
+          "name": "LoadingIndicatorState",
           "declaration": {
-            "name": "ButtonVariant",
-            "module": "src/components/button/examples/variant.example.tsx"
+            "name": "LoadingIndicatorState",
+            "module": "src/components/loading-indicator/examples/state.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-variant",
+          "name": "loading-indicator-state",
           "declaration": {
-            "name": "ButtonVariant",
-            "module": "src/components/button/examples/variant.example.tsx"
+            "name": "LoadingIndicatorState",
+            "module": "src/components/loading-indicator/examples/state.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "width.example.tsx",
+      "path": "timeout.example.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonWidth",
+          "name": "LoadingIndicatorTimeout",
           "members": [
             {
               "kind": "field",
@@ -20259,6 +21846,30 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "loadingState",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"inactive\""
+            },
+            {
+              "kind": "method",
+              "name": "onTimeoutFn"
+            },
+            {
+              "kind": "method",
+              "name": "getLabel",
+              "parameters": [
+                {
+                  "name": "loadState",
+                  "type": {
+                    "text": "LoadingIndicatorStateType | string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "enableAttributePassing",
@@ -20286,7 +21897,7 @@
               "name": "render"
             }
           ],
-          "tagName": "button-width",
+          "tagName": "loading-indicator-timeout",
           "events": [],
           "customElement": true
         }
@@ -20294,30 +21905,30 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonWidth",
+          "name": "LoadingIndicatorTimeout",
           "declaration": {
-            "name": "ButtonWidth",
-            "module": "src/components/button/examples/width.example.tsx"
+            "name": "LoadingIndicatorTimeout",
+            "module": "src/components/loading-indicator/examples/timeout.example.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-width",
+          "name": "loading-indicator-timeout",
           "declaration": {
-            "name": "ButtonWidth",
-            "module": "src/components/button/examples/width.example.tsx"
+            "name": "LoadingIndicatorTimeout",
+            "module": "src/components/loading-indicator/examples/timeout.example.tsx"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "button.showcase.tsx",
+      "path": "loading-indicator.showcase.tsx",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ButtonShowcase",
+          "name": "LoadingIndicatorShowcase",
           "members": [
             {
               "kind": "field",
@@ -20370,7 +21981,7 @@
               }
             }
           ],
-          "tagName": "button-showcase",
+          "tagName": "loading-indicator-showcase",
           "events": [],
           "customElement": true
         }
@@ -20378,18 +21989,18 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ButtonShowcase",
+          "name": "LoadingIndicatorShowcase",
           "declaration": {
-            "name": "ButtonShowcase",
-            "module": "src/components/button/showcase/button.showcase.tsx"
+            "name": "LoadingIndicatorShowcase",
+            "module": "src/components/loading-indicator/showcase/loading-indicator.showcase.tsx"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "button-showcase",
+          "name": "loading-indicator-showcase",
           "declaration": {
-            "name": "ButtonShowcase",
-            "module": "src/components/button/showcase/button.showcase.tsx"
+            "name": "LoadingIndicatorShowcase",
+            "module": "src/components/loading-indicator/showcase/loading-indicator.showcase.tsx"
           }
         }
       ]