@public-ui/components 4.1.2-rc.0 → 4.1.2-rc.2

package/custom-elements.json

@@ -1,9 +1,9 @@
 {
-  "version": "4.1.2-rc.0",
+  "version": "4.1.2-rc.2",
   "tags": [
     {
       "name": "kol-abbr",
-      "description": "",
+      "description": "The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip.\nThe tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered.",
       "attributes": [
         {
           "name": "_label",
@@ -25,7 +25,7 @@
     },
     {
       "name": "kol-accordion",
-      "description": "",
+      "description": "The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n\nAccordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.",
       "attributes": [
         {
           "name": "_disabled",
@@ -66,7 +66,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions."
+          "description": "Allows arbitrary HTML to be inserted into the content area of the accordion."
         }
       ],
       "cssProperties": [],
@@ -74,7 +74,7 @@
     },
     {
       "name": "kol-alert",
-      "description": "",
+      "description": "The **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert.",
       "attributes": [
         {
           "name": "_alert",
@@ -123,7 +123,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Der Inhalt der Meldung."
+          "description": "The content of the notification."
         }
       ],
       "cssProperties": [],
@@ -131,7 +131,7 @@
     },
     {
       "name": "kol-avatar",
-      "description": "",
+      "description": "The **Avatar** component displays either a small image of the user or their initials if no image is available.",
       "attributes": [
         {
           "name": "_color",
@@ -160,7 +160,7 @@
     },
     {
       "name": "kol-badge",
-      "description": "",
+      "description": "The **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.",
       "attributes": [
         {
           "name": "_color",
@@ -202,7 +202,7 @@
     },
     {
       "name": "kol-breadcrumb",
-      "description": "",
+      "description": "The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure.",
       "attributes": [
         {
           "name": "_label",
@@ -225,7 +225,7 @@
     },
     {
       "name": "kol-button",
-      "description": "",
+      "description": "The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.",
       "attributes": [
         {
           "name": "_access-key",
@@ -355,13 +355,18 @@
           "signature": "getValue() => Promise<StencilUnknown>"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "expert",
+          "description": "Custom label content, e.g. for rich text or icons."
+        }
+      ],
       "cssProperties": [],
       "cssParts": []
     },
     {
       "name": "kol-button-link",
-      "description": "",
+      "description": "The **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.\n\nA button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.\n\nInstead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.\n\nA link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.\n\nSince a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.",
       "attributes": [
         {
           "name": "_access-key",
@@ -484,49 +489,18 @@
           "signature": "getValue() => Promise<StencilUnknown>"
         }
       ],
-      "slots": [],
-      "cssProperties": [],
-      "cssParts": []
-    },
-    {
-      "name": "kol-card",
-      "description": "",
-      "attributes": [
-        {
-          "name": "_has-closer",
-          "type": "boolean | undefined",
-          "description": "Defines whether the element can be closed.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_label",
-          "type": "string",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
-          "required": true
-        },
-        {
-          "name": "_level",
-          "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined",
-          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.",
-          "defaultValue": "0",
-          "required": false
-        }
-      ],
-      "events": [],
-      "methods": [],
       "slots": [
         {
-          "name": "",
-          "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card."
+          "name": "expert",
+          "description": "Custom label content, e.g. for rich text or icons."
         }
       ],
       "cssProperties": [],
       "cssParts": []
     },
     {
-      "name": "kol-card-wc",
-      "description": "",
+      "name": "kol-card",
+      "description": "The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.\n\nThe **Card** component consists of a **_title area_** and a **_content area_**.\n\nThe **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font.",
       "attributes": [
         {
           "name": "_has-closer",
@@ -554,32 +528,9 @@
       "slots": [
         {
           "name": "",
-          "description": "Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card."
-        }
-      ],
-      "cssProperties": [],
-      "cssParts": []
-    },
-    {
-      "name": "kol-click-button",
-      "description": "",
-      "attributes": [
-        {
-          "name": "_label",
-          "type": "string",
-          "description": "Sets the label of the click button component.",
-          "required": true
-        }
-      ],
-      "events": [],
-      "methods": [
-        {
-          "name": "focus",
-          "description": "Focuses the interactive element of the component.",
-          "signature": "focus() => Promise<void>"
+          "description": "Allows arbitrary HTML to be inserted into the content area of the card."
         }
       ],
-      "slots": [],
       "cssProperties": [],
       "cssParts": []
     },
@@ -714,7 +665,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -722,7 +673,7 @@
     },
     {
       "name": "kol-details",
-      "description": "",
+      "description": "The **Details** component allows additional information to be initially shown with a short introductory text,\nwhich is only fully expanded after the user clicks on an arrow icon.\n\nBy default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\nfollowed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\nchanges its orientation from **_right_** to **_down_**.\nThe component can also be closed again to hide the content.",
       "attributes": [
         {
           "name": "_disabled",
@@ -763,7 +714,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Der Inhalt, der in der Detailbeschreibung angezeigt wird."
+          "description": "The content displayed in the detail description."
         }
       ],
       "cssProperties": [],
@@ -870,7 +821,7 @@
     },
     {
       "name": "kol-form",
-      "description": "",
+      "description": "The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.",
       "attributes": [
         {
           "name": "_required-text",
@@ -891,7 +842,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Inhalt der Form."
+          "description": "The content of the form."
         }
       ],
       "cssProperties": [],
@@ -899,7 +850,7 @@
     },
     {
       "name": "kol-heading",
-      "description": "",
+      "description": "The **Heading** component can be used wherever a heading needs to be displayed. By using the different sizes, content can be clearly structured and pages can be presented effectively and with variety. It separates styling from semantics and enables flexibility.",
       "attributes": [
         {
           "name": "_label",
@@ -926,7 +877,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Inhalt der Überschrift."
+          "description": "The heading content."
         }
       ],
       "cssProperties": [],
@@ -934,7 +885,7 @@
     },
     {
       "name": "kol-icon",
-      "description": "",
+      "description": "The **Icon** component allows icons from included icon fonts to be displayed at any position.",
       "attributes": [
         {
           "name": "_icons",
@@ -957,7 +908,7 @@
     },
     {
       "name": "kol-image",
-      "description": "",
+      "description": "The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.",
       "attributes": [
         {
           "name": "_alt",
@@ -998,7 +949,7 @@
     },
     {
       "name": "kol-input-checkbox",
-      "description": "",
+      "description": "The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.",
       "attributes": [
         {
           "name": "_access-key",
@@ -1144,7 +1095,7 @@
     },
     {
       "name": "kol-input-color",
-      "description": "",
+      "description": "The **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.",
       "attributes": [
         {
           "name": "_access-key",
@@ -1266,7 +1217,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -1274,7 +1225,7 @@
     },
     {
       "name": "kol-input-date",
-      "description": "",
+      "description": "The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.",
       "attributes": [
         {
           "name": "_access-key",
@@ -1440,7 +1391,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -1448,7 +1399,7 @@
     },
     {
       "name": "kol-input-email",
-      "description": "",
+      "description": "The **Email** input type creates an input field for email addresses. It supports built-in format validation, multiple addresses via the `_multiple` property, and auto-complete suggestions.",
       "attributes": [
         {
           "name": "_access-key",
@@ -1623,7 +1574,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -1631,7 +1582,7 @@
     },
     {
       "name": "kol-input-file",
-      "description": "",
+      "description": "The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.",
       "attributes": [
         {
           "name": "_accept",
@@ -1759,7 +1710,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -1767,7 +1718,7 @@
     },
     {
       "name": "kol-input-number",
-      "description": "",
+      "description": "The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.",
       "attributes": [
         {
           "name": "_access-key",
@@ -1927,7 +1878,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -1935,7 +1886,7 @@
     },
     {
       "name": "kol-input-password",
-      "description": "",
+      "description": "The **Password** input type creates an input field for passwords. The input is masked with dot symbols.",
       "attributes": [
         {
           "name": "_access-key",
@@ -2104,7 +2055,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -2112,7 +2063,7 @@
     },
     {
       "name": "kol-input-radio",
-      "description": "",
+      "description": "The **InputRadio** input type consists of a collection of radio elements, providing a choice between different values. Only a single value can be selected at a time. Selected radio elements are typically represented by a filled, visually highlighted circle.",
       "attributes": [
         {
           "name": "_disabled",
@@ -2218,7 +2169,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Legende/Überschrift der Radiobuttons."
+          "description": "The legend/heading of the radio buttons."
         }
       ],
       "cssProperties": [],
@@ -2226,7 +2177,7 @@
     },
     {
       "name": "kol-input-range",
-      "description": "",
+      "description": "The **Range** input type creates a slider control for selecting a numeric value within a defined range. Use the `_min`, `_max`, and `_step` properties to configure the range and step size.",
       "attributes": [
         {
           "name": "_access-key",
@@ -2362,7 +2313,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabeelements."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -2370,7 +2321,7 @@
     },
     {
       "name": "kol-input-text",
-      "description": "",
+      "description": "The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.",
       "attributes": [
         {
           "name": "_access-key",
@@ -2576,7 +2527,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -2732,7 +2683,7 @@
     },
     {
       "name": "kol-link-button",
-      "description": "",
+      "description": "The **LinkButton** component is semantically a link but has the appearance of a button. All relevant properties of the Link component are adopted and extended with the design-defining properties of a button.",
       "attributes": [
         {
           "name": "_access-key",
@@ -2843,13 +2794,18 @@
           "signature": "focus() => Promise<void | undefined>"
         }
       ],
-      "slots": [],
+      "slots": [
+        {
+          "name": "expert",
+          "description": "Custom label content, e.g. for rich text or icons."
+        }
+      ],
       "cssProperties": [],
       "cssParts": []
     },
     {
       "name": "kol-modal",
-      "description": "",
+      "description": "The **Modal** component has been superseded by `kol-dialog`, which provides improved accessibility and conforms to the HTML dialog specification. It is still available in version 2 for backwards compatibility.",
       "attributes": [
         {
           "name": "_label",
@@ -2896,7 +2852,7 @@
     },
     {
       "name": "kol-nav",
-      "description": "",
+      "description": "The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.\nIt provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.",
       "attributes": [
         {
           "name": "_collapsible",
@@ -3022,83 +2978,6 @@
       "cssProperties": [],
       "cssParts": []
     },
-    {
-      "name": "kol-pagination-wc",
-      "description": "",
-      "attributes": [
-        {
-          "name": "_boundary-count",
-          "type": "number | undefined",
-          "description": "Defines the amount of pages to show next to the outer arrow buttons.",
-          "defaultValue": "1",
-          "required": false
-        },
-        {
-          "name": "_custom-class",
-          "type": "string | undefined",
-          "description": "Defines the custom class attribute if _variant=\"custom\" is set.",
-          "required": false
-        },
-        {
-          "name": "_has-buttons",
-          "type": "boolean | string | undefined | { first: boolean; last: boolean; next: boolean; previous: boolean; }",
-          "description": "Defines which navigation buttons to render (first, last, next, previous buttons).",
-          "defaultValue": "true",
-          "required": false
-        },
-        {
-          "name": "_label",
-          "type": "string | undefined",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
-          "required": false
-        },
-        {
-          "name": "_max",
-          "type": "number",
-          "description": "Defines the maximum value of the element.",
-          "required": true
-        },
-        {
-          "name": "_page",
-          "type": "number",
-          "description": "Defines the current page.",
-          "required": true
-        },
-        {
-          "name": "_page-size",
-          "type": "number",
-          "description": "Defines the amount of entries to show per page.",
-          "defaultValue": "1",
-          "required": false
-        },
-        {
-          "name": "_page-size-options",
-          "type": "number[] | string",
-          "description": "Defines the options for the page-size-select.",
-          "defaultValue": "[]",
-          "required": false
-        },
-        {
-          "name": "_sibling-count",
-          "type": "number | undefined",
-          "description": "Defines the amount of pages to show next to the current page.",
-          "defaultValue": "1",
-          "required": false
-        },
-        {
-          "name": "_tooltip-align",
-          "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
-          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
-          "defaultValue": "'top'",
-          "required": false
-        }
-      ],
-      "events": [],
-      "methods": [],
-      "slots": [],
-      "cssProperties": [],
-      "cssParts": []
-    },
     {
       "name": "kol-popover-button",
       "description": "",
@@ -3235,25 +3114,90 @@
       "cssParts": []
     },
     {
-      "name": "kol-popover-button-wc",
-      "description": "",
+      "name": "kol-progress",
+      "description": "The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.",
       "attributes": [
         {
-          "name": "_access-key",
+          "name": "_label",
           "type": "string | undefined",
-          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.",
+          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
           "required": false
         },
         {
-          "name": "_aria-description",
+          "name": "_max",
+          "type": "number",
+          "description": "Defines the maximum value of the element.",
+          "required": true
+        },
+        {
+          "name": "_unit",
           "type": "string | undefined",
-          "description": "Defines the value for the aria-description attribute.",
+          "description": "Defines the unit of the step values (not shown).",
           "required": false
         },
         {
-          "name": "_custom-class",
+          "name": "_value",
+          "type": "number",
+          "description": "Defines the value of the element.",
+          "required": true
+        },
+        {
+          "name": "_variant",
+          "type": "\"bar\" | \"cycle\" | undefined",
+          "description": "Defines which variant should be used for presentation.",
+          "required": false
+        }
+      ],
+      "events": [],
+      "methods": [],
+      "slots": [],
+      "cssProperties": [],
+      "cssParts": []
+    },
+    {
+      "name": "kol-quote",
+      "description": "The **Quote** component has two variants: a short inline (`inline`) and an indented block (`block`) variant. Both variants include a link to the source of the quote.",
+      "attributes": [
+        {
+          "name": "_href",
+          "type": "string",
+          "description": "Sets the target URI of the link or citation source.",
+          "required": true
+        },
+        {
+          "name": "_label",
           "type": "string | undefined",
-          "description": "Defines the custom class attribute if _variant=\"custom\" is set.",
+          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
+          "required": false
+        },
+        {
+          "name": "_quote",
+          "type": "string",
+          "description": "Defines the text of the quote.",
+          "required": true
+        },
+        {
+          "name": "_variant",
+          "type": "\"block\" | \"inline\" | undefined",
+          "description": "Defines which variant should be used for presentation.",
+          "defaultValue": "'inline'",
+          "required": false
+        }
+      ],
+      "events": [],
+      "methods": [],
+      "slots": [],
+      "cssProperties": [],
+      "cssParts": []
+    },
+    {
+      "name": "kol-select",
+      "description": "",
+      "attributes": [
+        {
+          "name": "_access-key",
+          "type": "string | undefined",
+          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.",
           "required": false
         },
         {
@@ -3271,210 +3215,10 @@
           "required": false
         },
         {
-          "name": "_icons",
-          "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined",
-          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
-          "required": false
-        },
-        {
-          "name": "_inline",
-          "type": "boolean | undefined",
-          "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_label",
-          "type": "string",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.",
-          "required": true
-        },
-        {
-          "name": "_name",
-          "type": "string | undefined",
-          "description": "Defines the technical name of an input field.",
-          "required": false
-        },
-        {
-          "name": "_popover-align",
-          "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
-          "description": "Defines where to show the Popover preferably: top, right, bottom or left.",
-          "defaultValue": "'bottom'",
-          "required": false
-        },
-        {
-          "name": "_short-key",
-          "type": "string | undefined",
-          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.",
-          "required": false
-        },
-        {
-          "name": "_tab-index",
-          "type": "number | undefined",
-          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)",
-          "required": false
-        },
-        {
-          "name": "_tooltip-align",
-          "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
-          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
-          "defaultValue": "'top'",
-          "required": false
-        },
-        {
-          "name": "_type",
-          "type": "\"button\" | \"reset\" | \"submit\" | undefined",
-          "description": "Defines either the type of the component or of the components interactive element.",
-          "defaultValue": "'button'",
-          "required": false
-        },
-        {
-          "name": "_value",
-          "type": "boolean | null | number | object | string | undefined",
-          "description": "Defines the value of the element.",
-          "required": false
-        },
-        {
-          "name": "_variant",
-          "type": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined",
-          "description": "Defines which variant should be used for presentation.",
-          "defaultValue": "'normal'",
-          "required": false
-        }
-      ],
-      "events": [],
-      "methods": [
-        {
-          "name": "focus",
-          "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void | undefined>"
-        },
-        {
-          "name": "hidePopover",
-          "description": "Hides the popover programmatically by calling the native hidePopover method.",
-          "signature": "hidePopover() => Promise<void>"
-        },
-        {
-          "name": "showPopover",
-          "description": "Show the popover programmatically by calling the native showPopover method.",
-          "signature": "showPopover() => Promise<void>"
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "The popover content."
-        }
-      ],
-      "cssProperties": [],
-      "cssParts": []
-    },
-    {
-      "name": "kol-progress",
-      "description": "",
-      "attributes": [
-        {
-          "name": "_label",
-          "type": "string | undefined",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
-          "required": false
-        },
-        {
-          "name": "_max",
-          "type": "number",
-          "description": "Defines the maximum value of the element.",
-          "required": true
-        },
-        {
-          "name": "_unit",
-          "type": "string | undefined",
-          "description": "Defines the unit of the step values (not shown).",
-          "required": false
-        },
-        {
-          "name": "_value",
-          "type": "number",
-          "description": "Defines the value of the element.",
-          "required": true
-        },
-        {
-          "name": "_variant",
-          "type": "\"bar\" | \"cycle\" | undefined",
-          "description": "Defines which variant should be used for presentation.",
-          "required": false
-        }
-      ],
-      "events": [],
-      "methods": [],
-      "slots": [],
-      "cssProperties": [],
-      "cssParts": []
-    },
-    {
-      "name": "kol-quote",
-      "description": "",
-      "attributes": [
-        {
-          "name": "_href",
-          "type": "string",
-          "description": "Sets the target URI of the link or citation source.",
-          "required": true
-        },
-        {
-          "name": "_label",
-          "type": "string | undefined",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
-          "required": false
-        },
-        {
-          "name": "_quote",
-          "type": "string",
-          "description": "Defines the text of the quote.",
-          "required": true
-        },
-        {
-          "name": "_variant",
-          "type": "\"block\" | \"inline\" | undefined",
-          "description": "Defines which variant should be used for presentation.",
-          "defaultValue": "'inline'",
-          "required": false
-        }
-      ],
-      "events": [],
-      "methods": [],
-      "slots": [],
-      "cssProperties": [],
-      "cssParts": []
-    },
-    {
-      "name": "kol-select",
-      "description": "",
-      "attributes": [
-        {
-          "name": "_access-key",
-          "type": "string | undefined",
-          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.",
-          "required": false
-        },
-        {
-          "name": "_disabled",
-          "type": "boolean | undefined",
-          "description": "Makes the element not focusable and ignore all events.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_hide-label",
-          "type": "boolean | undefined",
-          "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_hide-msg",
-          "type": "boolean | undefined",
-          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.",
-          "defaultValue": "false",
+          "name": "_hide-msg",
+          "type": "boolean | undefined",
+          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.",
+          "defaultValue": "false",
           "required": false
         },
         {
@@ -3583,150 +3327,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
-        }
-      ],
-      "cssProperties": [],
-      "cssParts": []
-    },
-    {
-      "name": "kol-select-wc",
-      "description": "",
-      "attributes": [
-        {
-          "name": "_access-key",
-          "type": "string | undefined",
-          "description": "Defines the key combination that can be used to trigger or focus the component’s interactive element.",
-          "required": false
-        },
-        {
-          "name": "_disabled",
-          "type": "boolean | undefined",
-          "description": "Makes the element not focusable and ignore all events.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_hide-label",
-          "type": "boolean | undefined",
-          "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_hide-msg",
-          "type": "boolean | undefined",
-          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_hint",
-          "type": "string | undefined",
-          "description": "Defines the hint text.",
-          "defaultValue": "''",
-          "required": false
-        },
-        {
-          "name": "_icons",
-          "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }",
-          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).",
-          "required": false
-        },
-        {
-          "name": "_label",
-          "type": "string",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.",
-          "required": true
-        },
-        {
-          "name": "_msg",
-          "type": "Omit<AlertProps, \"_on\" | \"_variant\" | \"_hasCloser\" | \"_label\" | \"_level\"> & { _description: string; } | string | undefined",
-          "description": "Defines the properties for a message rendered as Alert component.",
-          "required": false
-        },
-        {
-          "name": "_multiple",
-          "type": "boolean | undefined",
-          "description": "Makes the input accept multiple inputs.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_name",
-          "type": "string | undefined",
-          "description": "Defines the technical name of an input field.",
-          "required": false
-        },
-        {
-          "name": "_options",
-          "type": "(Option<StencilUnknown> | Optgroup<StencilUnknown>)[] | string",
-          "description": "Options the user can choose from, also supporting Optgroup.",
-          "required": true
-        },
-        {
-          "name": "_required",
-          "type": "boolean | undefined",
-          "description": "Makes the input element required.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_rows",
-          "type": "number | undefined",
-          "description": "Defines how many rows of options should be visible at the same time.",
-          "required": false
-        },
-        {
-          "name": "_short-key",
-          "type": "string | undefined",
-          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.",
-          "required": false
-        },
-        {
-          "name": "_tab-index",
-          "type": "number | undefined",
-          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)",
-          "required": false
-        },
-        {
-          "name": "_tooltip-align",
-          "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined",
-          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
-          "defaultValue": "'top'",
-          "required": false
-        },
-        {
-          "name": "_touched",
-          "type": "boolean | undefined",
-          "description": "Shows if the input was touched by a user.",
-          "defaultValue": "false",
-          "required": false
-        },
-        {
-          "name": "_value",
-          "type": "StencilUnknown[] | boolean | null | number | object | string | undefined",
-          "description": "Defines the value of the input.",
-          "required": false
-        }
-      ],
-      "events": [],
-      "methods": [
-        {
-          "name": "focus",
-          "description": "Sets focus on the internal element.",
-          "signature": "focus() => Promise<void>"
-        },
-        {
-          "name": "getValue",
-          "description": "Returns the current value.",
-          "signature": "getValue() => Promise<StencilUnknown[] | StencilUnknown>"
-        }
-      ],
-      "slots": [
-        {
-          "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -3734,7 +3335,7 @@
     },
     {
       "name": "kol-single-select",
-      "description": "",
+      "description": "The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.",
       "attributes": [
         {
           "name": "_access-key",
@@ -3870,7 +3471,7 @@
       "slots": [
         {
           "name": "",
-          "description": "The input field label."
+          "description": "The label of the input field."
         }
       ],
       "cssProperties": [],
@@ -3915,7 +3516,7 @@
     },
     {
       "name": "kol-skip-nav",
-      "description": "",
+      "description": "The **SkipNav** component renders a hidden navigation that allows keyboard and assistive technology users to skip repetitive navigation sections and jump directly to the main content. It only becomes visible when reached via the Tab key.",
       "attributes": [
         {
           "name": "_label",
@@ -3944,7 +3545,7 @@
     },
     {
       "name": "kol-spin",
-      "description": "",
+      "description": "The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.",
       "attributes": [
         {
           "name": "_label",
@@ -3969,13 +3570,18 @@
       ],
       "events": [],
       "methods": [],
-      "slots": [],
+      "slots": [
+        {
+          "name": "expert",
+          "description": "Custom content displayed when the variant is set to `none`."
+        }
+      ],
       "cssProperties": [],
       "cssParts": []
     },
     {
       "name": "kol-split-button",
-      "description": "",
+      "description": "The **SplitButton** component can be used to display a two-part button. The primary button is typically used for\na main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.",
       "attributes": [
         {
           "name": "_access-key",
@@ -4106,7 +3712,7 @@
       "slots": [
         {
           "name": "",
-          "description": "Ermöglicht das Einfügen beliebigen HTMLs in das dropdown."
+          "description": "Allows arbitrary HTML to be inserted into the dropdown."
         }
       ],
       "cssProperties": [],
@@ -4114,7 +3720,7 @@
     },
     {
       "name": "kol-table-stateful",
-      "description": "",
+      "description": "The **Table** component is primarily used for the clear presentation of data sets. It is designed to automatically determine all data-dependent values and render the table accordingly. This includes optional features such as column sorting and pagination.",
       "attributes": [
         {
           "name": "_allow-multi-sort",
@@ -4233,7 +3839,7 @@
     },
     {
       "name": "kol-tabs",
-      "description": "",
+      "description": "The **Tabs** component is used to organize related content on the same page and navigate between them. Tabs ensure that large amounts of content can be more easily organized for users.",
       "attributes": [
         {
           "name": "_align",
@@ -4283,7 +3889,7 @@
     },
     {
       "name": "kol-textarea",
-      "description": "",
+      "description": "The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.",
       "attributes": [
         {
           "name": "_access-key",
@@ -4452,30 +4058,9 @@
       "slots": [
         {
           "name": "",
-          "description": "Die Beschriftung des Eingabefeldes."
-        }
-      ],
-      "cssProperties": [],
-      "cssParts": []
-    },
-    {
-      "name": "kol-toast-container",
-      "description": "",
-      "attributes": [],
-      "events": [],
-      "methods": [
-        {
-          "name": "closeAll",
-          "description": "Closes all toasts.",
-          "signature": "closeAll(immediate?: boolean) => Promise<void>"
-        },
-        {
-          "name": "enqueue",
-          "description": "Adds a toast to the queue.",
-          "signature": "enqueue(toast: Toast) => Promise<() => void>"
+          "description": "The label of the input field."
         }
       ],
-      "slots": [],
       "cssProperties": [],
       "cssParts": []
     },
@@ -4575,62 +4160,6 @@
       "cssProperties": [],
       "cssParts": []
     },
-    {
-      "name": "kol-tree-item-wc",
-      "description": "",
-      "attributes": [
-        {
-          "name": "_active",
-          "type": "boolean | undefined",
-          "description": "If set (to true) the tree item is the active one.",
-          "required": false
-        },
-        {
-          "name": "_href",
-          "type": "string",
-          "description": "Defines the target URI of the link.",
-          "required": true
-        },
-        {
-          "name": "_label",
-          "type": "string",
-          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).",
-          "required": true
-        },
-        {
-          "name": "_open",
-          "type": "boolean | undefined",
-          "description": "Opens/expands the element when truthy, closes/collapses when falsy.",
-          "required": false
-        }
-      ],
-      "events": [],
-      "methods": [
-        {
-          "name": "collapse",
-          "description": "Collapses the tree item.",
-          "signature": "collapse() => Promise<void>"
-        },
-        {
-          "name": "expand",
-          "description": "Expands the tree item.",
-          "signature": "expand() => Promise<void>"
-        },
-        {
-          "name": "focus",
-          "description": "Focuses the link element.",
-          "signature": "focus() => Promise<void | undefined>"
-        },
-        {
-          "name": "isOpen",
-          "description": "Returns whether the tree item is expanded.",
-          "signature": "isOpen() => Promise<boolean>"
-        }
-      ],
-      "slots": [],
-      "cssProperties": [],
-      "cssParts": []
-    },
     {
       "name": "kol-version",
       "description": "",