@public-ui/components

{ "version": "4.2.1", "tags": [ { "name": "kol-abbr", "description": "The **Abbr** component implements the HTML tag `abbr` with an accessible tooltip.\nThe tooltip for the description is displayed and read aloud when the **Abbr** component is focused or hovered.", "attributes": [ { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "The abbreviation (short form)." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-accordion", "description": "The **Accordion** component is a collapsible menu. Clicking the header area — consisting of an icon and a heading — expands the content to reveal additional information. It is an interactive navigation element designed to present extensive content in a space-saving manner.\n\nAccordions are used whenever content associated with a thematic heading needs to be shown or hidden. They allow more detailed information for a heading than would normally be practical, leaving it to the users to decide whether to view that information.", "attributes": [ { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false }, { "name": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "defaultValue": "false", "required": false } ], "events": [], "methods": [ { "name": "click", "description": "Triggers a click on the trigger button of the first section.", "signature": "click() => Promise<void>" }, { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise<void>" } ], "slots": [ { "name": "", "description": "Allows arbitrary HTML to be inserted into the content area of the accordion." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-alert", "description": "The **Alert** component provides visual feedback to users. It consists of a color-coded container, a heading, content text, and an icon. The icon used and the color scheme depend on the `_type` of the alert.", "attributes": [ { "name": "_alert", "type": "boolean | undefined", "description": "Defines whether the screen-readers should read out the notification.", "defaultValue": "false", "required": false }, { "name": "_has-closer", "type": "boolean | undefined", "description": "Defines whether the element can be closed.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string | undefined", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": false }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false }, { "name": "_type", "type": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\" | undefined", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'default'", "required": false }, { "name": "_variant", "type": "\"card\" | \"msg\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'msg'", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "The content of the notification." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-avatar", "description": "The **Avatar** component displays either a small image of the user or their initials if no image is available.", "attributes": [ { "name": "_color", "type": "string | undefined | { backgroundColor: string; foregroundColor: string; }", "description": "Defines the backgroundColor and foregroundColor.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_src", "type": "string | undefined", "description": "Sets the image `src` attribute to the given string.", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-badge", "description": "The **Badge** component allows you to visually highlight specific information.\nIn addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.", "attributes": [ { "name": "_color", "type": "string | undefined | { backgroundColor: string; foregroundColor: string; }", "description": "Defines the backgroundColor and foregroundColor.", "defaultValue": "'#000'", "required": false }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _type?: \"button\" | \"reset\" | \"submit\" | undefined; _accessKey?: string | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false } ], "events": [], "methods": [ { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise<void>" } ], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-breadcrumb", "description": "The **Breadcrumb** component can be used to display the path to the current position of a web page within a hierarchical structure.", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_links", "type": "BreadcrumbLinkProps[] | string", "description": "Defines the list of links combined with their labels to render.", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-button", "description": "The **Button** component is used to present users with action options and arrange them in a clear hierarchy. It helps users find the most important actions on a page or within a viewport and allows them to execute those actions. The button label clearly indicates which action will be triggered. Buttons allow users to confirm a change, complete steps in a task, or make decisions.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_aria-controls", "type": "string | undefined", "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)", "required": false }, { "name": "_aria-description", "type": "string | undefined", "description": "Defines the value for the aria-description attribute.", "required": false }, { "name": "_aria-expanded", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)", "required": false }, { "name": "_aria-selected", "type": "boolean | undefined", "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)", "required": false }, { "name": "_custom-class", "type": "string | undefined", "description": "Defines the custom class attribute if _variant=\"custom\" is set.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_inline", "type": "boolean | undefined", "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_role", "type": "\"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_type", "type": "\"button\" | \"reset\" | \"submit\" | undefined", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'button'", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value of the element.", "required": false }, { "name": "_variant", "type": "\"custom\" | \"danger\" | \"ghost\" | \"normal\" | \"primary\" | \"secondary\" | \"tertiary\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'normal'", "required": false } ], "events": [], "methods": [ { "name": "click", "description": "Clicks the primary interactive element inside this component.", "signature": "click() => Promise<void>" }, { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise<void>" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise<StencilUnknown>" } ], "slots": [ { "name": "expert", "description": "Custom label content, e.g. for rich text or icons." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-button-link", "description": "The **ButtonLink** component is semantically a button but has the appearance of a link. All relevant properties of the Button component are adopted and extended with the design-defining properties of a link.\n\nA button can be disabled, therefore the **ButtonLink** also has the `_disabled` property. How this is styled visually is determined by the UX designer.\n\nInstead of using `_href` as with a regular link, the **ButtonLink**'s behavior is controlled via a click callback using the `_on` property.\n\nA link has the `target` property which optionally opens the link in a new window/tab. This behavior is not yet implemented.\n\nSince a link, unlike a button, is not offered in multiple variants (`primary`, `secondary`, etc.), the `_customClass` and `_variant` properties are not available.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_aria-controls", "type": "string | undefined", "description": "Defines which elements are controlled by this component. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls)", "required": false }, { "name": "_aria-description", "type": "string | undefined", "description": "Defines the value for the aria-description attribute.", "required": false }, { "name": "_aria-expanded", "type": "boolean | undefined", "description": "Defines whether the interactive element of the component expanded something. (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded)", "required": false }, { "name": "_aria-selected", "type": "boolean | undefined", "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)", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_icons", "type": "KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_inline", "type": "boolean | undefined", "description": "Defines whether the component is displayed as a standalone block or inline without enforcing a minimum size of 44px.", "defaultValue": "true", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_role", "type": "\"tab\" | \"treeitem\" | undefined", "description": "Defines the role of the components primary element.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_type", "type": "\"button\" | \"reset\" | \"submit\" | undefined", "description": "Defines either the type of the component or of the components interactive element.", "defaultValue": "'button'", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value of the element.", "required": false }, { "name": "_variant", "type": "string | undefined", "description": "Defines which variant should be used for presentation.", "required": false } ], "events": [], "methods": [ { "name": "click", "description": "Clicks the primary interactive element inside this component.", "signature": "click() => Promise<void>" }, { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise<void>" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise<StencilUnknown>" } ], "slots": [ { "name": "expert", "description": "Custom label content, e.g. for rich text or icons." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-card", "description": "The **Card** component is ideal for visually highlighting individual sections of your website. It allows you to structure your content very easily.\n\nThe **Card** component consists of a **_title area_** and a **_content area_**.\n\nThe **title area** is displayed in a larger font. The **content area** is visually separated from the title area by a horizontal dividing line and is rendered in the default font.", "attributes": [ { "name": "_has-closer", "type": "boolean | undefined", "description": "Defines whether the element can be closed.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "Allows arbitrary HTML to be inserted into the content area of the card." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-combobox", "description": "", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_has-clear-button", "type": "boolean | undefined", "description": "Shows the clear button if enabled.", "defaultValue": "true", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hide-msg", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_msg", "type": "Omit<AlertProps, \"_on\" | \"_label\" | \"_level\" | \"_variant\" | \"_hasCloser\"> & { _description: string; } | string | undefined", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_placeholder", "type": "string | undefined", "description": "Defines the placeholder for input field. To be shown when there's no value.", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string", "description": "Suggestions to provide for the input.", "required": true }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "string | undefined", "description": "Defines the value of the element.", "required": false }, { "name": "_variant", "type": "string | undefined", "description": "Defines which variant should be used for presentation.", "required": false } ], "events": [], "methods": [ { "name": "click", "description": "Clicks the primary interactive element inside this component.", "signature": "click() => Promise<void>" }, { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise<void>" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise<string>" } ], "slots": [ { "name": "", "description": "The label of the input field." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-details", "description": "The **Details** component allows additional information to be initially shown with a short introductory text,\nwhich is only fully expanded after the user clicks on an arrow icon.\n\nBy default, the **Details** component is displayed as a single-line layout element consisting of an arrow icon\nfollowed by a short introductory text. The actual content is revealed below after clicking the header area. The arrow icon\nchanges its orientation from **_right_** to **_down_**.\nThe component can also be closed again to hide the content.", "attributes": [ { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false }, { "name": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "defaultValue": "false", "required": false } ], "events": [], "methods": [ { "name": "click", "description": "Triggers a click on the summary/toggle button.", "signature": "click() => Promise<void>" }, { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise<void>" } ], "slots": [ { "name": "", "description": "The content displayed in the detail description." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-dialog", "description": "", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false }, { "name": "_variant", "type": "\"blank\" | \"card\" | undefined", "description": "Defines the variant of the modal.", "defaultValue": "'blank'", "required": false }, { "name": "_width", "type": "string | undefined", "description": "Defines the width of the modal. (max-width: 100%)", "defaultValue": "'100%'", "required": false } ], "events": [], "methods": [ { "name": "close", "description": "Closes the dialog.", "signature": "close() => Promise<void>" }, { "name": "closeModal", "description": "Closes the dialog.", "signature": "closeModal() => Promise<void>" }, { "name": "openModal", "description": "Opens the dialog.", "signature": "openModal() => Promise<void>" }, { "name": "show", "description": "Opens the dialog. Pass true to open as a modal dialog.", "signature": "show(modal?: boolean) => Promise<void>" }, { "name": "showModal", "description": "Opens the dialog as a modal.", "signature": "showModal() => Promise<void>" } ], "slots": [ { "name": "", "description": "The dialog's contents." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-drawer", "description": "", "attributes": [ { "name": "_align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines the visual orientation of the component.", "required": false }, { "name": "_has-closer", "type": "boolean | undefined", "description": "Defines whether the element can be closed.", "defaultValue": "false", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false }, { "name": "_open", "type": "boolean | undefined", "description": "Opens/expands the element when truthy, closes/collapses when falsy.", "required": false } ], "events": [], "methods": [ { "name": "close", "description": "Closes the drawer.", "signature": "close() => Promise<void>" }, { "name": "open", "description": "Opens the drawer.", "signature": "open() => Promise<void>" }, { "name": "show", "description": "Opens the drawer. Pass true to open as a modal drawer.", "signature": "show(modal?: boolean) => Promise<void>" }, { "name": "showModal", "description": "Opens the drawer as a modal.", "signature": "showModal() => Promise<void>" } ], "slots": [ { "name": "", "description": "The Content of drawer." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-form", "description": "The **Form** component is used to wrap all input fields, correctly position the required-fields hint text, and forward the `submit` and `reset` events.", "attributes": [ { "name": "_required-text", "type": "boolean | string | undefined", "description": "Defines whether the mandatory-fields-hint should be shown. A string overrides the default text.", "defaultValue": "true", "required": false } ], "events": [], "methods": [ { "name": "focusErrorList", "description": "Scrolls to the error list and focuses the first link.", "signature": "focusErrorList() => Promise<void>" } ], "slots": [ { "name": "", "description": "The content of the form." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-heading", "description": "", "attributes": [ { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_level", "type": "0 | 1 | 2 | 3 | 4 | 5 | 6 | undefined", "description": "Defines which H-level from 1-6 the heading has. 0 specifies no heading and is shown as bold text.", "defaultValue": "0", "required": false }, { "name": "_secondary-headline", "type": "string | undefined", "description": "Defines the text of the secondary headline.", "required": false } ], "events": [], "methods": [], "slots": [ { "name": "", "description": "Inhalt der Überschrift." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-icon", "description": "The **Icon** component allows icons from included icon fonts to be displayed at any position.", "attributes": [ { "name": "_icons", "type": "string", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": true }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).", "required": true } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-image", "description": "The **Image** component renders an image with support for responsive loading via `srcset` and `sizes`, lazy loading, and accessible alternative text.", "attributes": [ { "name": "_alt", "type": "string", "description": "Sets the alternative text of the image.", "required": true }, { "name": "_loading", "type": "\"eager\" | \"lazy\" | undefined", "description": "Defines the loading mode for the image.", "required": false }, { "name": "_sizes", "type": "string | undefined", "description": "Defines the image sizes for different screen resolutions, supporting _srcset.", "required": false }, { "name": "_src", "type": "string", "description": "Sets the image `src` attribute to the given string.", "required": true }, { "name": "_srcset", "type": "string | undefined", "description": "Sets a list of source URLs with widths of the images.", "required": false } ], "events": [], "methods": [], "slots": [], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-checkbox", "description": "The **Checkbox** input type generates a rectangular box that can be activated and deactivated by clicking. When activated, a colored checkmark is shown inside the box.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_checked", "type": "boolean | undefined", "description": "Defines whether the checkbox is checked or not. Can be read and written.", "defaultValue": "false", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hide-msg", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { checked: string; indeterminate?: string | undefined; unchecked?: string | undefined; } | { checked?: string | undefined; indeterminate: string; unchecked?: string | undefined; } | { checked?: string | undefined; indeterminate?: string | undefined; unchecked: string; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_indeterminate", "type": "boolean | undefined", "description": "Puts the checkbox in the indeterminate state, does not change the value of _checked.", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_label-align", "type": "\"left\" | \"right\" | undefined", "description": "Defines which alignment should be used for presentation.", "defaultValue": "'right'", "required": false }, { "name": "_msg", "type": "Omit<AlertProps, \"_on\" | \"_label\" | \"_level\" | \"_variant\" | \"_hasCloser\"> & { _description: string; } | string | undefined", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_required", "type": "boolean | undefined", "description": "Makes the input element required.", "defaultValue": "false", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "boolean | null | number | object | string | undefined", "description": "Defines the value of the element.", "defaultValue": "true", "required": false }, { "name": "_variant", "type": "\"button\" | \"default\" | \"switch\" | undefined", "description": "Defines which variant should be used for presentation.", "defaultValue": "'default'", "required": false } ], "events": [], "methods": [ { "name": "click", "description": "Clicks the primary interactive element inside this component.", "signature": "click() => Promise<void>" }, { "name": "focus", "description": "Sets focus on the internal element.", "signature": "focus() => Promise<void>" }, { "name": "getValue", "description": "Returns the current value.", "signature": "getValue() => Promise<StencilUnknown>" } ], "slots": [ { "name": "expert", "description": "Checkbox description." } ], "cssProperties": [], "cssParts": [] }, { "name": "kol-input-color", "description": "The **Color** input type creates a selection field for defining any color. The color can be entered in hexadecimal, RGB, or HSL notation. It is possible to select a color via a picker or by entering exact color values.", "attributes": [ { "name": "_access-key", "type": "string | undefined", "description": "Defines the key combination that can be used to trigger or focus the component's interactive element.", "required": false }, { "name": "_auto-complete", "type": "string | undefined", "description": "Defines whether the input can be auto-completed.", "defaultValue": "'off'", "required": false }, { "name": "_disabled", "type": "boolean | undefined", "description": "Makes the element not focusable and ignore all events.", "defaultValue": "false", "required": false }, { "name": "_hide-label", "type": "boolean | undefined", "description": "Hides the caption by default and displays the caption text with a tooltip when the\ninteractive element is focused or the mouse is over it.", "defaultValue": "false", "required": false }, { "name": "_hide-msg", "type": "boolean | undefined", "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby.", "defaultValue": "false", "required": false }, { "name": "_hint", "type": "string | undefined", "description": "Defines the hint text.", "defaultValue": "''", "required": false }, { "name": "_icons", "type": "string | undefined | { right?: IconOrIconClass | undefined; left?: IconOrIconClass | undefined; }", "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`).", "required": false }, { "name": "_label", "type": "string", "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.", "required": true }, { "name": "_msg", "type": "Omit<AlertProps, \"_on\" | \"_label\" | \"_level\" | \"_variant\" | \"_hasCloser\"> & { _description: string; } | string | undefined", "description": "Defines the properties for a message rendered as Alert component.", "required": false }, { "name": "_name", "type": "string | undefined", "description": "Defines the technical name of an input field.", "required": false }, { "name": "_short-key", "type": "string | undefined", "description": "Adds a visual shortcut hint after the label and instructs the screen reader to read the shortcut aloud.", "required": false }, { "name": "_smart-button", "type": "string | undefined | { _label: string; } & { _type?: \"button\" | \"reset\" | \"submit\" | undefined; _accessKey?: string | undefined; _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _role?: \"tab\" | \"treeitem\" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; }", "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).", "required": false }, { "name": "_suggestions", "type": "W3CInputValue[] | string | undefined", "description": "Suggestions to provide for the input.", "required": false }, { "name": "_tooltip-align", "type": "\"bottom\" | \"left\" | \"right\" | \"top\" | undefined", "description": "Defines where to show the Tooltip preferably: top, right, bottom or left.", "defaultValue": "'top'", "required": false }, { "name": "_touched", "type": "boolean | undefined", "description": "Shows if the input was touched by a user.", "defaultValue": "false", "required": false }, { "name": "_value", "type": "string | undefined", "description": "Defines the value of the element.", "requ