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

package/dist/types/components.d.ts

@@ -24,12 +24,20 @@ export { OrientationPropType } from "./schema/props/orientation";
 export { QuoteVariantType } from "./internal/props/variant-quote";
 export { HasCreateButtonPropType } from "./schema/props/has-create-button";
 export namespace Components {
+    /**
+     * The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip.
+     * The tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered.
+     */
     interface KolAbbr {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label"?: LabelPropType;
     }
+    /**
+     * 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.
+     * Accordions 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.
+     */
     interface KolAccordion {
         /**
           * Makes the element not focusable and ignore all events.
@@ -60,6 +68,9 @@ export namespace Components {
          */
         "focus": () => Promise<void | undefined>;
     }
+    /**
+     * 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.
+     */
     interface KolAlert {
         /**
           * Defines whether the screen-readers should read out the notification.
@@ -132,6 +143,9 @@ export namespace Components {
          */
         "_variant"?: AlertVariantPropType;
     }
+    /**
+     * The **Avatar** component displays either a small image of the user or their initials if no image is available.
+     */
     interface KolAvatar {
         /**
           * Defines the backgroundColor and foregroundColor.
@@ -146,6 +160,10 @@ export namespace Components {
          */
         "_src"?: string;
     }
+    /**
+     * The **Badge** component allows you to visually highlight specific information.
+     * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.
+     */
     interface KolBadge {
         /**
           * Defines the backgroundColor and foregroundColor.
@@ -169,6 +187,9 @@ export namespace Components {
          */
         "focus": () => Promise<void>;
     }
+    /**
+     * The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure.
+     */
     interface KolBreadcrumb {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
@@ -179,6 +200,9 @@ export namespace Components {
          */
         "_links": Stringified<BreadcrumbLinkProps[]>;
     }
+    /**
+     * 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.
+     */
     interface KolButton {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -277,6 +301,13 @@ export namespace Components {
          */
         "getValue": () => Promise<StencilUnknown>;
     }
+    /**
+     * 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.
+     * A button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.
+     * Instead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.
+     * A link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.
+     * Since a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.
+     */
     interface KolButtonLink {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -477,6 +508,11 @@ export namespace Components {
          */
         "focus": () => Promise<void>;
     }
+    /**
+     * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.
+     * The **Card** component consists of a **_title area_** and a **_content area_**.
+     * The **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.
+     */
     interface KolCard {
         /**
           * Defines whether the element can be closed.
@@ -627,6 +663,14 @@ export namespace Components {
          */
         "getValue": () => Promise<string>;
     }
+    /**
+     * The **Details** component allows additional information to be initially shown with a short introductory text,
+     * which is only fully expanded after the user clicks on an arrow icon.
+     * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon
+     * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon
+     * changes its orientation from **_right_** to **_down_**.
+     * The component can also be closed again to hide the content.
+     */
     interface KolDetails {
         /**
           * Makes the element not focusable and ignore all events.
@@ -748,6 +792,9 @@ export namespace Components {
          */
         "open": () => Promise<void>;
     }
+    /**
+     * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.
+     */
     interface KolForm {
         /**
           * A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error.
@@ -767,6 +814,9 @@ export namespace Components {
          */
         "focusErrorList": () => Promise<void>;
     }
+    /**
+     * 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.
+     */
     interface KolHeading {
         /**
           * 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.
@@ -782,6 +832,9 @@ export namespace Components {
          */
         "_secondaryHeadline"?: string;
     }
+    /**
+     * The **Icon** component allows icons from included icon fonts to be displayed at any position.
+     */
     interface KolIcon {
         /**
           * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
@@ -792,6 +845,9 @@ export namespace Components {
          */
         "_label": string;
     }
+    /**
+     * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.
+     */
     interface KolImage {
         /**
           * Sets the alternative text of the image.
@@ -814,6 +870,9 @@ export namespace Components {
          */
         "_srcset"?: string;
     }
+    /**
+     * 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.
+     */
     interface KolInputCheckbox {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -922,6 +981,9 @@ export namespace Components {
          */
         "getValue": () => Promise<StencilUnknown>;
     }
+    /**
+     * 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.
+     */
     interface KolInputColor {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -1015,6 +1077,9 @@ export namespace Components {
          */
         "getValue": () => Promise<string | undefined>;
     }
+    /**
+     * The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.
+     */
     interface KolInputDate {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -1141,6 +1206,9 @@ export namespace Components {
          */
         "reset": () => Promise<void>;
     }
+    /**
+     * 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.
+     */
     interface KolInputEmail {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -1274,6 +1342,9 @@ export namespace Components {
          */
         "getValue": () => Promise<string | undefined>;
     }
+    /**
+     * The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.
+     */
     interface KolInputFile {
         /**
           * Defines which file formats are accepted.
@@ -1374,6 +1445,9 @@ export namespace Components {
          */
         "reset": () => Promise<void>;
     }
+    /**
+     * The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.
+     */
     interface KolInputNumber {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -1495,6 +1569,9 @@ export namespace Components {
          */
         "getValue": () => Promise<number | NumberString | null>;
     }
+    /**
+     * The **Password** input type creates an input field for passwords. The input is masked with dot symbols.
+     */
     interface KolInputPassword {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -1623,6 +1700,9 @@ export namespace Components {
          */
         "getValue": () => Promise<string | undefined>;
     }
+    /**
+     * 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.
+     */
     interface KolInputRadio {
         /**
           * Makes the element not focusable and ignore all events.
@@ -1708,6 +1788,9 @@ export namespace Components {
          */
         "getValue": () => Promise<StencilUnknown>;
     }
+    /**
+     * 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.
+     */
     interface KolInputRange {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -1811,6 +1894,9 @@ export namespace Components {
          */
         "getValue": () => Promise<number | NumberString | undefined>;
     }
+    /**
+     * The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.
+     */
     interface KolInputText {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -2064,6 +2150,9 @@ export namespace Components {
          */
         "focus": () => Promise<void | undefined>;
     }
+    /**
+     * 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.
+     */
     interface KolLinkButton {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -2241,6 +2330,7 @@ export namespace Components {
         "focus": () => Promise<void>;
     }
     /**
+     * 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.
      * @deprecated Use `kol-dialog` instead.
      */
     interface KolModal {
@@ -2271,6 +2361,10 @@ export namespace Components {
          */
         "openModal": () => Promise<void>;
     }
+    /**
+     * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.
+     * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.
+     */
     interface KolNav {
         /**
           * Defines if navigation nodes can be collapsed or not. Enabled by default.
@@ -2608,6 +2702,9 @@ export namespace Components {
          */
         "_show"?: boolean;
     }
+    /**
+     * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.
+     */
     interface KolProgress {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
@@ -2630,6 +2727,9 @@ export namespace Components {
          */
         "_variant"?: ProgressVariantType;
     }
+    /**
+     * 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.
+     */
     interface KolQuote {
         /**
           * Sets the target URI of the link or citation source.
@@ -2857,6 +2957,9 @@ export namespace Components {
          */
         "getValue": () => Promise<StencilUnknown[] | StencilUnknown>;
     }
+    /**
+     * The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.
+     */
     interface KolSingleSelect {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -2974,6 +3077,9 @@ export namespace Components {
          */
         "toggle": () => Promise<void>;
     }
+    /**
+     * 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.
+     */
     interface KolSkipNav {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
@@ -2988,6 +3094,9 @@ export namespace Components {
          */
         "focus": () => Promise<void | undefined>;
     }
+    /**
+     * The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.
+     */
     interface KolSpin {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
@@ -3005,6 +3114,10 @@ export namespace Components {
          */
         "_variant"?: SpinVariantPropType;
     }
+    /**
+     * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for
+     * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.
+     */
     interface KolSplitButton {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -3109,6 +3222,9 @@ export namespace Components {
          */
         "_horizontalHeaderCells": KoliBriTableHeaderCell[][];
     }
+    /**
+     * 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.
+     */
     interface KolTableStateful {
         /**
           * Defines whether to allow multi sort.
@@ -3228,6 +3344,9 @@ export namespace Components {
          */
         "_selection"?: TableSelectionPropType;
     }
+    /**
+     * 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.
+     */
     interface KolTabs {
         /**
           * Defines the visual orientation of the component.
@@ -3261,6 +3380,9 @@ export namespace Components {
          */
         "_tabs": Stringified<TabButtonProps[]>;
     }
+    /**
+     * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.
+     */
     interface KolTextarea {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -3534,12 +3656,20 @@ export interface KolSkeletonCustomEvent<T> extends CustomEvent<T> {
     target: HTMLKolSkeletonElement;
 }
 declare global {
+    /**
+     * The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip.
+     * The tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered.
+     */
     interface HTMLKolAbbrElement extends Components.KolAbbr, HTMLStencilElement {
     }
     var HTMLKolAbbrElement: {
         prototype: HTMLKolAbbrElement;
         new (): HTMLKolAbbrElement;
     };
+    /**
+     * 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.
+     * Accordions 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.
+     */
     interface HTMLKolAccordionElement extends Omit<Components.KolAccordion, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3550,6 +3680,9 @@ declare global {
         prototype: HTMLKolAccordionElement;
         new (): HTMLKolAccordionElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolAlertElement extends Components.KolAlert, HTMLStencilElement {
     }
     var HTMLKolAlertElement: {
@@ -3562,12 +3695,19 @@ declare global {
         prototype: HTMLKolAlertWcElement;
         new (): HTMLKolAlertWcElement;
     };
+    /**
+     * The **Avatar** component displays either a small image of the user or their initials if no image is available.
+     */
     interface HTMLKolAvatarElement extends Components.KolAvatar, HTMLStencilElement {
     }
     var HTMLKolAvatarElement: {
         prototype: HTMLKolAvatarElement;
         new (): HTMLKolAvatarElement;
     };
+    /**
+     * The **Badge** component allows you to visually highlight specific information.
+     * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.
+     */
     interface HTMLKolBadgeElement extends Omit<Components.KolBadge, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3578,12 +3718,18 @@ declare global {
         prototype: HTMLKolBadgeElement;
         new (): HTMLKolBadgeElement;
     };
+    /**
+     * The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure.
+     */
     interface HTMLKolBreadcrumbElement extends Components.KolBreadcrumb, HTMLStencilElement {
     }
     var HTMLKolBreadcrumbElement: {
         prototype: HTMLKolBreadcrumbElement;
         new (): HTMLKolBreadcrumbElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolButtonElement extends Omit<Components.KolButton, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3594,6 +3740,13 @@ declare global {
         prototype: HTMLKolButtonElement;
         new (): HTMLKolButtonElement;
     };
+    /**
+     * 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.
+     * A button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.
+     * Instead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.
+     * A link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.
+     * Since a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.
+     */
     interface HTMLKolButtonLinkElement extends Omit<Components.KolButtonLink, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3614,6 +3767,11 @@ declare global {
         prototype: HTMLKolButtonWcElement;
         new (): HTMLKolButtonWcElement;
     };
+    /**
+     * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.
+     * The **Card** component consists of a **_title area_** and a **_content area_**.
+     * The **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.
+     */
     interface HTMLKolCardElement extends Components.KolCard, HTMLStencilElement {
     }
     var HTMLKolCardElement: {
@@ -3646,6 +3804,14 @@ declare global {
         prototype: HTMLKolComboboxElement;
         new (): HTMLKolComboboxElement;
     };
+    /**
+     * The **Details** component allows additional information to be initially shown with a short introductory text,
+     * which is only fully expanded after the user clicks on an arrow icon.
+     * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon
+     * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon
+     * changes its orientation from **_right_** to **_down_**.
+     * The component can also be closed again to hide the content.
+     */
     interface HTMLKolDetailsElement extends Omit<Components.KolDetails, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3677,30 +3843,45 @@ declare global {
         prototype: HTMLKolDrawerElement;
         new (): HTMLKolDrawerElement;
     };
+    /**
+     * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.
+     */
     interface HTMLKolFormElement extends Components.KolForm, HTMLStencilElement {
     }
     var HTMLKolFormElement: {
         prototype: HTMLKolFormElement;
         new (): HTMLKolFormElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolHeadingElement extends Components.KolHeading, HTMLStencilElement {
     }
     var HTMLKolHeadingElement: {
         prototype: HTMLKolHeadingElement;
         new (): HTMLKolHeadingElement;
     };
+    /**
+     * The **Icon** component allows icons from included icon fonts to be displayed at any position.
+     */
     interface HTMLKolIconElement extends Components.KolIcon, HTMLStencilElement {
     }
     var HTMLKolIconElement: {
         prototype: HTMLKolIconElement;
         new (): HTMLKolIconElement;
     };
+    /**
+     * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.
+     */
     interface HTMLKolImageElement extends Components.KolImage, HTMLStencilElement {
     }
     var HTMLKolImageElement: {
         prototype: HTMLKolImageElement;
         new (): HTMLKolImageElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolInputCheckboxElement extends Omit<Components.KolInputCheckbox, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3711,6 +3892,9 @@ declare global {
         prototype: HTMLKolInputCheckboxElement;
         new (): HTMLKolInputCheckboxElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolInputColorElement extends Omit<Components.KolInputColor, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3721,6 +3905,9 @@ declare global {
         prototype: HTMLKolInputColorElement;
         new (): HTMLKolInputColorElement;
     };
+    /**
+     * The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.
+     */
     interface HTMLKolInputDateElement extends Omit<Components.KolInputDate, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3731,6 +3918,9 @@ declare global {
         prototype: HTMLKolInputDateElement;
         new (): HTMLKolInputDateElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolInputEmailElement extends Omit<Components.KolInputEmail, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3741,6 +3931,9 @@ declare global {
         prototype: HTMLKolInputEmailElement;
         new (): HTMLKolInputEmailElement;
     };
+    /**
+     * The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.
+     */
     interface HTMLKolInputFileElement extends Omit<Components.KolInputFile, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3751,6 +3944,9 @@ declare global {
         prototype: HTMLKolInputFileElement;
         new (): HTMLKolInputFileElement;
     };
+    /**
+     * The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.
+     */
     interface HTMLKolInputNumberElement extends Omit<Components.KolInputNumber, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3761,6 +3957,9 @@ declare global {
         prototype: HTMLKolInputNumberElement;
         new (): HTMLKolInputNumberElement;
     };
+    /**
+     * The **Password** input type creates an input field for passwords. The input is masked with dot symbols.
+     */
     interface HTMLKolInputPasswordElement extends Omit<Components.KolInputPassword, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3771,6 +3970,9 @@ declare global {
         prototype: HTMLKolInputPasswordElement;
         new (): HTMLKolInputPasswordElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolInputRadioElement extends Omit<Components.KolInputRadio, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3781,6 +3983,9 @@ declare global {
         prototype: HTMLKolInputRadioElement;
         new (): HTMLKolInputRadioElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolInputRangeElement extends Omit<Components.KolInputRange, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3791,6 +3996,9 @@ declare global {
         prototype: HTMLKolInputRangeElement;
         new (): HTMLKolInputRangeElement;
     };
+    /**
+     * The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.
+     */
     interface HTMLKolInputTextElement extends Omit<Components.KolInputText, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3817,6 +4025,9 @@ declare global {
         prototype: HTMLKolLinkElement;
         new (): HTMLKolLinkElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolLinkButtonElement extends Omit<Components.KolLinkButton, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3838,6 +4049,7 @@ declare global {
         new (): HTMLKolLinkWcElement;
     };
     /**
+     * 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.
      * @deprecated Use `kol-dialog` instead.
      */
     interface HTMLKolModalElement extends Components.KolModal, HTMLStencilElement {
@@ -3846,6 +4058,10 @@ declare global {
         prototype: HTMLKolModalElement;
         new (): HTMLKolModalElement;
     };
+    /**
+     * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.
+     * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.
+     */
     interface HTMLKolNavElement extends Components.KolNav, HTMLStencilElement {
     }
     var HTMLKolNavElement: {
@@ -3906,12 +4122,18 @@ declare global {
         prototype: HTMLKolPopoverWcElement;
         new (): HTMLKolPopoverWcElement;
     };
+    /**
+     * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.
+     */
     interface HTMLKolProgressElement extends Components.KolProgress, HTMLStencilElement {
     }
     var HTMLKolProgressElement: {
         prototype: HTMLKolProgressElement;
         new (): HTMLKolProgressElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolQuoteElement extends Components.KolQuote, HTMLStencilElement {
     }
     var HTMLKolQuoteElement: {
@@ -3938,6 +4160,9 @@ declare global {
         prototype: HTMLKolSelectWcElement;
         new (): HTMLKolSelectWcElement;
     };
+    /**
+     * The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.
+     */
     interface HTMLKolSingleSelectElement extends Omit<Components.KolSingleSelect, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3970,6 +4195,9 @@ declare global {
         prototype: HTMLKolSkeletonElement;
         new (): HTMLKolSkeletonElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolSkipNavElement extends Omit<Components.KolSkipNav, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -3980,12 +4208,19 @@ declare global {
         prototype: HTMLKolSkipNavElement;
         new (): HTMLKolSkipNavElement;
     };
+    /**
+     * The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.
+     */
     interface HTMLKolSpinElement extends Components.KolSpin, HTMLStencilElement {
     }
     var HTMLKolSpinElement: {
         prototype: HTMLKolSpinElement;
         new (): HTMLKolSpinElement;
     };
+    /**
+     * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for
+     * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.
+     */
     interface HTMLKolSplitButtonElement extends Omit<Components.KolSplitButton, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -4002,6 +4237,9 @@ declare global {
         prototype: HTMLKolTableSettingsWcElement;
         new (): HTMLKolTableSettingsWcElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolTableStatefulElement extends Components.KolTableStateful, HTMLStencilElement {
     }
     var HTMLKolTableStatefulElement: {
@@ -4020,12 +4258,18 @@ declare global {
         prototype: HTMLKolTableStatelessWcElement;
         new (): HTMLKolTableStatelessWcElement;
     };
+    /**
+     * 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.
+     */
     interface HTMLKolTabsElement extends Components.KolTabs, HTMLStencilElement {
     }
     var HTMLKolTabsElement: {
         prototype: HTMLKolTabsElement;
         new (): HTMLKolTabsElement;
     };
+    /**
+     * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.
+     */
     interface HTMLKolTextareaElement extends Omit<Components.KolTextarea, "focus">, HTMLStencilElement {
         /**
           * Sets focus on the internal element.
@@ -4172,12 +4416,20 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    /**
+     * The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip.
+     * The tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered.
+     */
     interface KolAbbr {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
          */
         "_label"?: LabelPropType;
     }
+    /**
+     * 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.
+     * Accordions 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.
+     */
     interface KolAccordion {
         /**
           * Makes the element not focusable and ignore all events.
@@ -4204,6 +4456,9 @@ declare namespace LocalJSX {
          */
         "_open"?: boolean;
     }
+    /**
+     * 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.
+     */
     interface KolAlert {
         /**
           * Defines whether the screen-readers should read out the notification.
@@ -4276,6 +4531,9 @@ declare namespace LocalJSX {
          */
         "_variant"?: AlertVariantPropType;
     }
+    /**
+     * The **Avatar** component displays either a small image of the user or their initials if no image is available.
+     */
     interface KolAvatar {
         /**
           * Defines the backgroundColor and foregroundColor.
@@ -4290,6 +4548,10 @@ declare namespace LocalJSX {
          */
         "_src"?: string;
     }
+    /**
+     * The **Badge** component allows you to visually highlight specific information.
+     * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.
+     */
     interface KolBadge {
         /**
           * Defines the backgroundColor and foregroundColor.
@@ -4309,6 +4571,9 @@ declare namespace LocalJSX {
          */
         "_smartButton"?: Stringified<InternalButtonProps>;
     }
+    /**
+     * The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure.
+     */
     interface KolBreadcrumb {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
@@ -4319,6 +4584,9 @@ declare namespace LocalJSX {
          */
         "_links": Stringified<BreadcrumbLinkProps[]>;
     }
+    /**
+     * 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.
+     */
     interface KolButton {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -4405,6 +4673,13 @@ declare namespace LocalJSX {
          */
         "_variant"?: ButtonVariantPropType;
     }
+    /**
+     * 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.
+     * A button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.
+     * Instead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.
+     * A link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.
+     * Since a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.
+     */
     interface KolButtonLink {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -4573,6 +4848,11 @@ declare namespace LocalJSX {
          */
         "_value"?: StencilUnknown;
     }
+    /**
+     * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.
+     * The **Card** component consists of a **_title area_** and a **_content area_**.
+     * The **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.
+     */
     interface KolCard {
         /**
           * Defines whether the element can be closed.
@@ -4707,6 +4987,14 @@ declare namespace LocalJSX {
          */
         "_value"?: string;
     }
+    /**
+     * The **Details** component allows additional information to be initially shown with a short introductory text,
+     * which is only fully expanded after the user clicks on an arrow icon.
+     * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon
+     * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon
+     * changes its orientation from **_right_** to **_down_**.
+     * The component can also be closed again to hide the content.
+     */
     interface KolDetails {
         /**
           * Makes the element not focusable and ignore all events.
@@ -4800,6 +5088,9 @@ declare namespace LocalJSX {
          */
         "_open"?: OpenPropType;
     }
+    /**
+     * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.
+     */
     interface KolForm {
         /**
           * A list of error objects that each describe an issue encountered in the form. Each error object contains a message and a selector for identifying the form element related to the error.
@@ -4815,6 +5106,9 @@ declare namespace LocalJSX {
          */
         "_requiredText"?: Stringified<boolean>;
     }
+    /**
+     * 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.
+     */
     interface KolHeading {
         /**
           * 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.
@@ -4830,6 +5124,9 @@ declare namespace LocalJSX {
          */
         "_secondaryHeadline"?: string;
     }
+    /**
+     * The **Icon** component allows icons from included icon fonts to be displayed at any position.
+     */
     interface KolIcon {
         /**
           * Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).
@@ -4840,6 +5137,9 @@ declare namespace LocalJSX {
          */
         "_label": string;
     }
+    /**
+     * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.
+     */
     interface KolImage {
         /**
           * Sets the alternative text of the image.
@@ -4862,6 +5162,9 @@ declare namespace LocalJSX {
          */
         "_srcset"?: string;
     }
+    /**
+     * 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.
+     */
     interface KolInputCheckbox {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -4958,6 +5261,9 @@ declare namespace LocalJSX {
          */
         "_variant"?: InputCheckboxVariantPropType;
     }
+    /**
+     * 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.
+     */
     interface KolInputColor {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -5039,6 +5345,9 @@ declare namespace LocalJSX {
          */
         "_value"?: string;
     }
+    /**
+     * The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.
+     */
     interface KolInputDate {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -5149,6 +5458,9 @@ declare namespace LocalJSX {
          */
         "_value"?: Iso8601 | Date | null;
     }
+    /**
+     * 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.
+     */
     interface KolInputEmail {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -5270,6 +5582,9 @@ declare namespace LocalJSX {
          */
         "_value"?: string;
     }
+    /**
+     * The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.
+     */
     interface KolInputFile {
         /**
           * Defines which file formats are accepted.
@@ -5354,6 +5669,9 @@ declare namespace LocalJSX {
          */
         "_touched"?: boolean;
     }
+    /**
+     * The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.
+     */
     interface KolInputNumber {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -5463,6 +5781,9 @@ declare namespace LocalJSX {
          */
         "_value"?: number | NumberString | null;
     }
+    /**
+     * The **Password** input type creates an input field for passwords. The input is masked with dot symbols.
+     */
     interface KolInputPassword {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -5579,6 +5900,9 @@ declare namespace LocalJSX {
          */
         "_variant"?: PasswordVariantPropType;
     }
+    /**
+     * 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.
+     */
     interface KolInputRadio {
         /**
           * Makes the element not focusable and ignore all events.
@@ -5652,6 +5976,9 @@ declare namespace LocalJSX {
          */
         "_value"?: StencilUnknown;
     }
+    /**
+     * 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.
+     */
     interface KolInputRange {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -5743,6 +6070,9 @@ declare namespace LocalJSX {
          */
         "_value"?: number | NumberString;
     }
+    /**
+     * The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.
+     */
     interface KolInputText {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -5960,6 +6290,9 @@ declare namespace LocalJSX {
          */
         "_variant"?: VariantClassNamePropType;
     }
+    /**
+     * 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.
+     */
     interface KolLinkButton {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -6125,6 +6458,7 @@ declare namespace LocalJSX {
         "_tooltipAlign"?: TooltipAlignPropType;
     }
     /**
+     * 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.
      * @deprecated Use `kol-dialog` instead.
      */
     interface KolModal {
@@ -6147,6 +6481,10 @@ declare namespace LocalJSX {
          */
         "_width"?: string;
     }
+    /**
+     * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.
+     * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.
+     */
     interface KolNav {
         /**
           * Defines if navigation nodes can be collapsed or not. Enabled by default.
@@ -6448,6 +6786,9 @@ declare namespace LocalJSX {
          */
         "_show"?: boolean;
     }
+    /**
+     * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.
+     */
     interface KolProgress {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
@@ -6470,6 +6811,9 @@ declare namespace LocalJSX {
          */
         "_variant"?: ProgressVariantType;
     }
+    /**
+     * 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.
+     */
     interface KolQuote {
         /**
           * Sets the target URI of the link or citation source.
@@ -6673,6 +7017,9 @@ declare namespace LocalJSX {
          */
         "_value"?: Stringified<StencilUnknown[]> | Stringified<StencilUnknown>;
     }
+    /**
+     * The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.
+     */
     interface KolSingleSelect {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -6778,6 +7125,9 @@ declare namespace LocalJSX {
          */
         "onRendered"?: (event: KolSkeletonCustomEvent<void>) => void;
     }
+    /**
+     * 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.
+     */
     interface KolSkipNav {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
@@ -6788,6 +7138,9 @@ declare namespace LocalJSX {
          */
         "_links": Stringified<LinkProps[]>;
     }
+    /**
+     * The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.
+     */
     interface KolSpin {
         /**
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).
@@ -6805,6 +7158,10 @@ declare namespace LocalJSX {
          */
         "_variant"?: SpinVariantPropType;
     }
+    /**
+     * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for
+     * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.
+     */
     interface KolSplitButton {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -6893,6 +7250,9 @@ declare namespace LocalJSX {
          */
         "_horizontalHeaderCells"?: KoliBriTableHeaderCell[][];
     }
+    /**
+     * 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.
+     */
     interface KolTableStateful {
         /**
           * Defines whether to allow multi sort.
@@ -7008,6 +7368,9 @@ declare namespace LocalJSX {
          */
         "_selection"?: TableSelectionPropType;
     }
+    /**
+     * 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.
+     */
     interface KolTabs {
         /**
           * Defines the visual orientation of the component.
@@ -7041,6 +7404,9 @@ declare namespace LocalJSX {
          */
         "_tabs": Stringified<TabButtonProps[]>;
     }
+    /**
+     * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.
+     */
     interface KolTextarea {
         /**
           * Defines the key combination that can be used to trigger or focus the component's interactive element.
@@ -7322,20 +7688,64 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            /**
+             * The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip.
+             * The tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered.
+             */
             "kol-abbr": LocalJSX.KolAbbr & JSXBase.HTMLAttributes<HTMLKolAbbrElement>;
+            /**
+             * 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.
+             * Accordions 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.
+             */
             "kol-accordion": LocalJSX.KolAccordion & JSXBase.HTMLAttributes<HTMLKolAccordionElement>;
+            /**
+             * 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.
+             */
             "kol-alert": LocalJSX.KolAlert & JSXBase.HTMLAttributes<HTMLKolAlertElement>;
             "kol-alert-wc": LocalJSX.KolAlertWc & JSXBase.HTMLAttributes<HTMLKolAlertWcElement>;
+            /**
+             * The **Avatar** component displays either a small image of the user or their initials if no image is available.
+             */
             "kol-avatar": LocalJSX.KolAvatar & JSXBase.HTMLAttributes<HTMLKolAvatarElement>;
+            /**
+             * The **Badge** component allows you to visually highlight specific information.
+             * In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.
+             */
             "kol-badge": LocalJSX.KolBadge & JSXBase.HTMLAttributes<HTMLKolBadgeElement>;
+            /**
+             * The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure.
+             */
             "kol-breadcrumb": LocalJSX.KolBreadcrumb & JSXBase.HTMLAttributes<HTMLKolBreadcrumbElement>;
+            /**
+             * 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.
+             */
             "kol-button": LocalJSX.KolButton & JSXBase.HTMLAttributes<HTMLKolButtonElement>;
+            /**
+             * 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.
+             * A button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.
+             * Instead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.
+             * A link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.
+             * Since a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.
+             */
             "kol-button-link": LocalJSX.KolButtonLink & JSXBase.HTMLAttributes<HTMLKolButtonLinkElement>;
             "kol-button-wc": LocalJSX.KolButtonWc & JSXBase.HTMLAttributes<HTMLKolButtonWcElement>;
+            /**
+             * The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.
+             * The **Card** component consists of a **_title area_** and a **_content area_**.
+             * The **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.
+             */
             "kol-card": LocalJSX.KolCard & JSXBase.HTMLAttributes<HTMLKolCardElement>;
             "kol-card-wc": LocalJSX.KolCardWc & JSXBase.HTMLAttributes<HTMLKolCardWcElement>;
             "kol-click-button": LocalJSX.KolClickButton & JSXBase.HTMLAttributes<HTMLKolClickButtonElement>;
             "kol-combobox": LocalJSX.KolCombobox & JSXBase.HTMLAttributes<HTMLKolComboboxElement>;
+            /**
+             * The **Details** component allows additional information to be initially shown with a short introductory text,
+             * which is only fully expanded after the user clicks on an arrow icon.
+             * By default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon
+             * followed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon
+             * changes its orientation from **_right_** to **_down_**.
+             * The component can also be closed again to hide the content.
+             */
             "kol-details": LocalJSX.KolDetails & JSXBase.HTMLAttributes<HTMLKolDetailsElement>;
             "kol-dialog": LocalJSX.KolDialog & JSXBase.HTMLAttributes<HTMLKolDialogElement>;
             /**
@@ -7343,48 +7753,126 @@ declare module "@stencil/core" {
              */
             "kol-dialog-wc": LocalJSX.KolDialogWc & JSXBase.HTMLAttributes<HTMLKolDialogWcElement>;
             "kol-drawer": LocalJSX.KolDrawer & JSXBase.HTMLAttributes<HTMLKolDrawerElement>;
+            /**
+             * The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.
+             */
             "kol-form": LocalJSX.KolForm & JSXBase.HTMLAttributes<HTMLKolFormElement>;
+            /**
+             * 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.
+             */
             "kol-heading": LocalJSX.KolHeading & JSXBase.HTMLAttributes<HTMLKolHeadingElement>;
+            /**
+             * The **Icon** component allows icons from included icon fonts to be displayed at any position.
+             */
             "kol-icon": LocalJSX.KolIcon & JSXBase.HTMLAttributes<HTMLKolIconElement>;
+            /**
+             * The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.
+             */
             "kol-image": LocalJSX.KolImage & JSXBase.HTMLAttributes<HTMLKolImageElement>;
+            /**
+             * 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.
+             */
             "kol-input-checkbox": LocalJSX.KolInputCheckbox & JSXBase.HTMLAttributes<HTMLKolInputCheckboxElement>;
+            /**
+             * 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.
+             */
             "kol-input-color": LocalJSX.KolInputColor & JSXBase.HTMLAttributes<HTMLKolInputColorElement>;
+            /**
+             * The **Date** input type creates an input field for date values. These can be specific dates as well as weeks, months, or time values.
+             */
             "kol-input-date": LocalJSX.KolInputDate & JSXBase.HTMLAttributes<HTMLKolInputDateElement>;
+            /**
+             * 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.
+             */
             "kol-input-email": LocalJSX.KolInputEmail & JSXBase.HTMLAttributes<HTMLKolInputEmailElement>;
+            /**
+             * The **File** input type creates an input field for file uploads. One or multiple files can be selected and submitted with a form.
+             */
             "kol-input-file": LocalJSX.KolInputFile & JSXBase.HTMLAttributes<HTMLKolInputFileElement>;
+            /**
+             * The **Number** input type creates an input field for numeric values. Use the `_min`, `_max`, and `_step` properties to restrict the accepted value range.
+             */
             "kol-input-number": LocalJSX.KolInputNumber & JSXBase.HTMLAttributes<HTMLKolInputNumberElement>;
+            /**
+             * The **Password** input type creates an input field for passwords. The input is masked with dot symbols.
+             */
             "kol-input-password": LocalJSX.KolInputPassword & JSXBase.HTMLAttributes<HTMLKolInputPasswordElement>;
+            /**
+             * 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.
+             */
             "kol-input-radio": LocalJSX.KolInputRadio & JSXBase.HTMLAttributes<HTMLKolInputRadioElement>;
+            /**
+             * 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.
+             */
             "kol-input-range": LocalJSX.KolInputRange & JSXBase.HTMLAttributes<HTMLKolInputRangeElement>;
+            /**
+             * The **Text** input type creates an input field for plain text, search terms, URLs, or phone numbers.
+             */
             "kol-input-text": LocalJSX.KolInputText & JSXBase.HTMLAttributes<HTMLKolInputTextElement>;
             "kol-kolibri": LocalJSX.KolKolibri & JSXBase.HTMLAttributes<HTMLKolKolibriElement>;
             "kol-link": LocalJSX.KolLink & JSXBase.HTMLAttributes<HTMLKolLinkElement>;
+            /**
+             * 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.
+             */
             "kol-link-button": LocalJSX.KolLinkButton & JSXBase.HTMLAttributes<HTMLKolLinkButtonElement>;
             "kol-link-wc": LocalJSX.KolLinkWc & JSXBase.HTMLAttributes<HTMLKolLinkWcElement>;
             /**
+             * 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.
              * @deprecated Use `kol-dialog` instead.
              */
             "kol-modal": LocalJSX.KolModal & JSXBase.HTMLAttributes<HTMLKolModalElement>;
+            /**
+             * The **Nav** component renders a group of related links or navigation elements that perform an action or display content when clicked.
+             * It provides a highly configurable vertical or horizontal navigation bar that can represent multiple levels and vary in width.
+             */
             "kol-nav": LocalJSX.KolNav & JSXBase.HTMLAttributes<HTMLKolNavElement>;
             "kol-pagination": LocalJSX.KolPagination & JSXBase.HTMLAttributes<HTMLKolPaginationElement>;
             "kol-pagination-wc": LocalJSX.KolPaginationWc & JSXBase.HTMLAttributes<HTMLKolPaginationWcElement>;
             "kol-popover-button": LocalJSX.KolPopoverButton & JSXBase.HTMLAttributes<HTMLKolPopoverButtonElement>;
             "kol-popover-button-wc": LocalJSX.KolPopoverButtonWc & JSXBase.HTMLAttributes<HTMLKolPopoverButtonWcElement>;
             "kol-popover-wc": LocalJSX.KolPopoverWc & JSXBase.HTMLAttributes<HTMLKolPopoverWcElement>;
+            /**
+             * The **Progress** component visualizes the completion status of a task or process. It supports both determinate (percentage-based) and indeterminate variants.
+             */
             "kol-progress": LocalJSX.KolProgress & JSXBase.HTMLAttributes<HTMLKolProgressElement>;
+            /**
+             * 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.
+             */
             "kol-quote": LocalJSX.KolQuote & JSXBase.HTMLAttributes<HTMLKolQuoteElement>;
             "kol-select": LocalJSX.KolSelect & JSXBase.HTMLAttributes<HTMLKolSelectElement>;
             "kol-select-wc": LocalJSX.KolSelectWc & JSXBase.HTMLAttributes<HTMLKolSelectWcElement>;
+            /**
+             * The **SingleSelect** component creates a dropdown list from which exactly one predefined option can be selected.
+             */
             "kol-single-select": LocalJSX.KolSingleSelect & JSXBase.HTMLAttributes<HTMLKolSingleSelectElement>;
             "kol-skeleton": LocalJSX.KolSkeleton & JSXBase.HTMLAttributes<HTMLKolSkeletonElement>;
+            /**
+             * 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.
+             */
             "kol-skip-nav": LocalJSX.KolSkipNav & JSXBase.HTMLAttributes<HTMLKolSkipNavElement>;
+            /**
+             * The **Spin** component informs users about loading or processing operations being performed by the system. Progress can be communicated through a repeated animation.
+             */
             "kol-spin": LocalJSX.KolSpin & JSXBase.HTMLAttributes<HTMLKolSpinElement>;
+            /**
+             * The **SplitButton** component can be used to display a two-part button. The primary button is typically used for
+             * a main action, while the secondary button opens a context menu (`Popover`) that contains additional actions.
+             */
             "kol-split-button": LocalJSX.KolSplitButton & JSXBase.HTMLAttributes<HTMLKolSplitButtonElement>;
             "kol-table-settings-wc": LocalJSX.KolTableSettingsWc & JSXBase.HTMLAttributes<HTMLKolTableSettingsWcElement>;
+            /**
+             * 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.
+             */
             "kol-table-stateful": LocalJSX.KolTableStateful & JSXBase.HTMLAttributes<HTMLKolTableStatefulElement>;
             "kol-table-stateless": LocalJSX.KolTableStateless & JSXBase.HTMLAttributes<HTMLKolTableStatelessElement>;
             "kol-table-stateless-wc": LocalJSX.KolTableStatelessWc & JSXBase.HTMLAttributes<HTMLKolTableStatelessWcElement>;
+            /**
+             * 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.
+             */
             "kol-tabs": LocalJSX.KolTabs & JSXBase.HTMLAttributes<HTMLKolTabsElement>;
+            /**
+             * The **Textarea** component provides a larger input field for content. Unlike InputText, it also allows extensive content to be entered, including line breaks.
+             */
             "kol-textarea": LocalJSX.KolTextarea & JSXBase.HTMLAttributes<HTMLKolTextareaElement>;
             /**
              * @deprecated Will be removed in the next major version. For more information, please refer to: https://github.com/public-ui/kolibri/issues/8372