@public-ui/components/vscode-custom-data.json

Contains all web components that belong to KoliBri - The accessible HTML-Standard.

{
  "version": 1.1,
  "tags": [
    {
      "name": "kol-abbr",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        }
      ]
    },
    {
      "name": "kol-accordion",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_level",
          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
        },
        {
          "name": "_open",
          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
        }
      ]
    },
    {
      "name": "kol-alert",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines whether the screen-readers should read out the notification."
        },
        {
          "name": "_has-closer",
          "description": "Defines whether the element can be closed."
        },
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_level",
          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
        },
        {
          "name": "_type",
          "description": "Defines either the type of the component or of the components interactive element.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "error"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            }
          ]
        },
        {
          "name": "_variant",
          "description": "Defines which variant should be used for presentation.",
          "values": [
            {
              "name": "card"
            },
            {
              "name": "msg"
            }
          ]
        }
      ]
    },
    {
      "name": "kol-avatar",
      "description": {
        "kind": "markdown",
        "value": "The **Avatar** component displays either a small image of the user or their initials if no image is available."
      },
      "attributes": [
        {
          "name": "_color",
          "description": "Defines the backgroundColor and foregroundColor."
        },
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_src",
          "description": "Sets the image `src` attribute to the given string."
        }
      ]
    },
    {
      "name": "kol-badge",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the backgroundColor and foregroundColor."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_smart-button",
          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
          "values": [
            {
              "name": "reset"
            },
            {
              "name": "submit"
            },
            {
              "name": "treeitem"
            }
          ]
        }
      ]
    },
    {
      "name": "kol-breadcrumb",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_links",
          "description": "Defines the list of links combined with their labels to render."
        }
      ]
    },
    {
      "name": "kol-button",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
        },
        {
          "name": "_aria-controls",
          "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)"
        },
        {
          "name": "_aria-description",
          "description": "Defines the value for the aria-description attribute."
        },
        {
          "name": "_aria-expanded",
          "description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)"
        },
        {
          "name": "_aria-selected",
          "description": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)"
        },
        {
          "name": "_custom-class",
          "description": "Defines the custom class attribute if _variant=\"custom\" is set."
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_hide-label",
          "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."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_inline",
          "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px."
        },
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_role",
          "description": "Defines the role of the components primary element.",
          "values": [
            {
              "name": "tab"
            },
            {
              "name": "treeitem"
            }
          ]
        },
        {
          "name": "_short-key",
          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
        },
        {
          "name": "_tooltip-align",
          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_type",
          "description": "Defines either the type of the component or of the components interactive element.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "_value",
          "description": "Defines the value of the element."
        },
        {
          "name": "_variant",
          "description": "Defines which variant should be used for presentation.",
          "values": [
            {
              "name": "custom"
            },
            {
              "name": "danger"
            },
            {
              "name": "ghost"
            },
            {
              "name": "normal"
            },
            {
              "name": "primary"
            },
            {
              "name": "secondary"
            },
            {
              "name": "tertiary"
            }
          ]
        }
      ]
    },
    {
      "name": "kol-button-link",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
        },
        {
          "name": "_aria-controls",
          "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)"
        },
        {
          "name": "_aria-description",
          "description": "Defines the value for the aria-description attribute."
        },
        {
          "name": "_aria-expanded",
          "description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)"
        },
        {
          "name": "_aria-selected",
          "description": "Defines whether the interactive element of the component is selected (e.g. role=tab). (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected)"
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_hide-label",
          "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."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_inline",
          "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px."
        },
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_role",
          "description": "Defines the role of the components primary element.",
          "values": [
            {
              "name": "tab"
            },
            {
              "name": "treeitem"
            }
          ]
        },
        {
          "name": "_short-key",
          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
        },
        {
          "name": "_tooltip-align",
          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_type",
          "description": "Defines either the type of the component or of the components interactive element.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            }
          ]
        },
        {
          "name": "_value",
          "description": "Defines the value of the element."
        },
        {
          "name": "_variant",
          "description": "Defines which variant should be used for presentation."
        }
      ]
    },
    {
      "name": "kol-card",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines whether the element can be closed."
        },
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_level",
          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
        }
      ]
    },
    {
      "name": "kol-combobox",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "_access-key",
          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_has-clear-button",
          "description": "Shows the clear button if enabled."
        },
        {
          "name": "_hide-label",
          "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."
        },
        {
          "name": "_hide-msg",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "name": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_msg",
          "description": "Defines the properties for a message rendered as Alert component.",
          "values": [
            {
              "name": "_label"
            },
            {
              "name": "_level"
            },
            {
              "name": "_variant"
            }
          ]
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_placeholder",
          "description": "Defines the placeholder for input field. To be shown when there's no value."
        },
        {
          "name": "_required",
          "description": "Makes the input element required."
        },
        {
          "name": "_short-key",
          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
        },
        {
          "name": "_suggestions",
          "description": "Suggestions to provide for the input."
        },
        {
          "name": "_tooltip-align",
          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_touched",
          "description": "Shows if the input was touched by a user."
        },
        {
          "name": "_value",
          "description": "Defines the value of the element."
        },
        {
          "name": "_variant",
          "description": "Defines which variant should be used for presentation."
        }
      ]
    },
    {
      "name": "kol-details",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_level",
          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
        },
        {
          "name": "_open",
          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
        }
      ]
    },
    {
      "name": "kol-dialog",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_level",
          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
        },
        {
          "name": "_variant",
          "description": "Defines the variant of the modal.",
          "values": [
            {
              "name": "blank"
            },
            {
              "name": "card"
            }
          ]
        },
        {
          "name": "_width",
          "description": "Defines the width of the modal. (max-width: 100%)"
        }
      ]
    },
    {
      "name": "kol-drawer",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "_align",
          "description": "Defines the visual orientation of the component.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_has-closer",
          "description": "Defines whether the element can be closed."
        },
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_level",
          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
        },
        {
          "name": "_open",
          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
        }
      ]
    },
    {
      "name": "kol-form",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines whether the mandatory-fields-hint should be shown. A string overrides the default text."
        }
      ]
    },
    {
      "name": "kol-heading",
      "description": {
        "kind": "markdown",
        "value": ""
      },
      "attributes": [
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_level",
          "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text."
        },
        {
          "name": "_secondary-headline",
          "description": "Defines the text of the secondary headline."
        }
      ]
    },
    {
      "name": "kol-icon",
      "description": {
        "kind": "markdown",
        "value": "The **Icon** component allows icons from included icon fonts to be displayed at any position."
      },
      "attributes": [
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        }
      ]
    },
    {
      "name": "kol-image",
      "description": {
        "kind": "markdown",
        "value": "The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text."
      },
      "attributes": [
        {
          "name": "_alt",
          "description": "Sets the alternative text of the image."
        },
        {
          "name": "_loading",
          "description": "Defines the loading mode for the image.",
          "values": [
            {
              "name": "eager"
            },
            {
              "name": "lazy"
            }
          ]
        },
        {
          "name": "_sizes",
          "description": "Defines the image sizes for different screen resolutions, supporting _srcset."
        },
        {
          "name": "_src",
          "description": "Sets the image `src` attribute to the given string."
        },
        {
          "name": "_srcset",
          "description": "Sets a list of source URLs with widths of the images."
        }
      ]
    },
    {
      "name": "kol-input-checkbox",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
        },
        {
          "name": "_checked",
          "description": "Defines whether the checkbox is checked or not. Can be read and written."
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_hide-label",
          "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."
        },
        {
          "name": "_hide-msg",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "name": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_indeterminate",
          "description": "Puts the checkbox in the indeterminate state, does not change the value of _checked."
        },
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_label-align",
          "description": "Defines which alignment should be used for presentation.",
          "values": [
            {
              "name": "left"
            },
            {
              "name": "right"
            }
          ]
        },
        {
          "name": "_msg",
          "description": "Defines the properties for a message rendered as Alert component.",
          "values": [
            {
              "name": "_label"
            },
            {
              "name": "_level"
            },
            {
              "name": "_variant"
            }
          ]
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_required",
          "description": "Makes the input element required."
        },
        {
          "name": "_short-key",
          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
        },
        {
          "name": "_tooltip-align",
          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_touched",
          "description": "Shows if the input was touched by a user."
        },
        {
          "name": "_value",
          "description": "Defines the value of the element."
        },
        {
          "name": "_variant",
          "description": "Defines which variant should be used for presentation.",
          "values": [
            {
              "name": "button"
            },
            {
              "name": "default"
            },
            {
              "name": "switch"
            }
          ]
        }
      ]
    },
    {
      "name": "kol-input-color",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
        },
        {
          "name": "_auto-complete",
          "description": "Defines whether the input can be auto-completed."
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_hide-label",
          "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."
        },
        {
          "name": "_hide-msg",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "name": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_msg",
          "description": "Defines the properties for a message rendered as Alert component.",
          "values": [
            {
              "name": "_label"
            },
            {
              "name": "_level"
            },
            {
              "name": "_variant"
            }
          ]
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_short-key",
          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
        },
        {
          "name": "_smart-button",
          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
          "values": [
            {
              "name": "reset"
            },
            {
              "name": "submit"
            },
            {
              "name": "treeitem"
            }
          ]
        },
        {
          "name": "_suggestions",
          "description": "Suggestions to provide for the input."
        },
        {
          "name": "_tooltip-align",
          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_touched",
          "description": "Shows if the input was touched by a user."
        },
        {
          "name": "_value",
          "description": "Defines the value of the element."
        },
        {
          "name": "_variant",
          "description": "Defines which variant should be used for presentation."
        }
      ]
    },
    {
      "name": "kol-input-date",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
        },
        {
          "name": "_auto-complete",
          "description": "Defines whether the input can be auto-completed."
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_hide-label",
          "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."
        },
        {
          "name": "_hide-msg",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "name": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_max",
          "description": "Defines the maximum value of the element."
        },
        {
          "name": "_min",
          "description": "Defines the smallest possible input value."
        },
        {
          "name": "_msg",
          "description": "Defines the properties for a message rendered as Alert component.",
          "values": [
            {
              "name": "_label"
            },
            {
              "name": "_level"
            },
            {
              "name": "_variant"
            }
          ]
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_read-only",
          "description": "Makes the input element read only."
        },
        {
          "name": "_required",
          "description": "Makes the input element required."
        },
        {
          "name": "_short-key",
          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
        },
        {
          "name": "_smart-button",
          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
          "values": [
            {
              "name": "reset"
            },
            {
              "name": "submit"
            },
            {
              "name": "treeitem"
            }
          ]
        },
        {
          "name": "_step",
          "description": "Defines the step size for value changes."
        },
        {
          "name": "_suggestions",
          "description": "Suggestions to provide for the input."
        },
        {
          "name": "_tooltip-align",
          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_touched",
          "description": "Shows if the input was touched by a user."
        },
        {
          "name": "_type",
          "description": "Defines either the type of the component or of the components interactive element.",
          "values": [
            {
              "name": "date"
            },
            {
              "name": "datetime-local"
            },
            {
              "name": "month"
            },
            {
              "name": "time"
            },
            {
              "name": "week"
            }
          ]
        },
        {
          "name": "_value",
          "description": "Defines the value of the element."
        },
        {
          "name": "_variant",
          "description": "Defines which variant should be used for presentation."
        }
      ]
    },
    {
      "name": "kol-input-email",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
        },
        {
          "name": "_auto-complete",
          "description": "Defines whether the input can be auto-completed."
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_has-counter",
          "description": "Shows a character counter for the input element."
        },
        {
          "name": "_hide-label",
          "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."
        },
        {
          "name": "_hide-msg",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "name": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_max-length",
          "description": "Defines the maximum number of input characters."
        },
        {
          "name": "_max-length-behavior",
          "description": "Defines the behavior when maxLength is set. 'hard' sets the maxlength attribute, 'soft' shows a character counter without preventing input.",
          "values": [
            {
              "name": "hard"
            },
            {
              "name": "soft"
            }
          ]
        },
        {
          "name": "_msg",
          "description": "Defines the properties for a message rendered as Alert component.",
          "values": [
            {
              "name": "_label"
            },
            {
              "name": "_level"
            },
            {
              "name": "_variant"
            }
          ]
        },
        {
          "name": "_multiple",
          "description": "Makes the input accept multiple inputs."
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_pattern",
          "description": "Defines a validation pattern for the input field."
        },
        {
          "name": "_placeholder",
          "description": "Defines the placeholder for input field. To be shown when there's no value."
        },
        {
          "name": "_read-only",
          "description": "Makes the input element read only."
        },
        {
          "name": "_required",
          "description": "Makes the input element required."
        },
        {
          "name": "_short-key",
          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
        },
        {
          "name": "_smart-button",
          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
          "values": [
            {
              "name": "reset"
            },
            {
              "name": "submit"
            },
            {
              "name": "treeitem"
            }
          ]
        },
        {
          "name": "_suggestions",
          "description": "Suggestions to provide for the input."
        },
        {
          "name": "_tooltip-align",
          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_touched",
          "description": "Shows if the input was touched by a user."
        },
        {
          "name": "_value",
          "description": "Defines the value of the element."
        },
        {
          "name": "_variant",
          "description": "Defines which variant should be used for presentation."
        }
      ]
    },
    {
      "name": "kol-input-file",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines which file formats are accepted."
        },
        {
          "name": "_access-key",
          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_hide-label",
          "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."
        },
        {
          "name": "_hide-msg",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "name": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_msg",
          "description": "Defines the properties for a message rendered as Alert component.",
          "values": [
            {
              "name": "_label"
            },
            {
              "name": "_level"
            },
            {
              "name": "_variant"
            }
          ]
        },
        {
          "name": "_multiple",
          "description": "Makes the input accept multiple inputs."
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_required",
          "description": "Makes the input element required."
        },
        {
          "name": "_short-key",
          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
        },
        {
          "name": "_smart-button",
          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
          "values": [
            {
              "name": "reset"
            },
            {
              "name": "submit"
            },
            {
              "name": "treeitem"
            }
          ]
        },
        {
          "name": "_tooltip-align",
          "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_touched",
          "description": "Shows if the input was touched by a user."
        },
        {
          "name": "_variant",
          "description": "Defines which variant should be used for presentation."
        }
      ]
    },
    {
      "name": "kol-input-number",
      "description": {
        "kind": "markdown",
        "value": "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",
          "description": "Defines the key combination that can be used to trigger or focus the component's interactive element."
        },
        {
          "name": "_auto-complete",
          "description": "Defines whether the input can be auto-completed."
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_hide-label",
          "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."
        },
        {
          "name": "_hide-msg",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "name": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_label",
          "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."
        },
        {
          "name": "_max",
          "description": "Defines the maximum value of the element."
        },
        {
          "name": "_min",
          "description": "Defines the smallest possible input value."
        },
        {
          "name": "_msg",
          "description": "Defines the properties for a message rendered as Alert component.",
          "values": [
            {
              "name": "_label"
            },
            {
              "name": "_level"
            },
            {
              "name": "_variant"
            }
          ]
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_placeholder",
          "description": "Defines the placeholder for input field. To be shown when there's no value."
        },
        {
          "name": "_read-only",
          "description": "Makes the input element read only."
        },
        {
          "name": "_required",
          "description": "Makes the input element required."
        },
        {
          "name": "_short-key",
          "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud."
        },
        {
          "name": "_smart-button",
          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
          "values": [
            {
              "name": "reset"
            },
            {
              "name": "submit"
            },
            {
              "name": "treeitem"
            }
          ]
        },
        {
          "name": "_step",
          "description": "Defines the step s