@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": "Die **Abbr**-Komponente implementiert den HTML-Tag `abbr`, wobei hier jedoch der Tooltip barrierefrei ist.\nDer Tooltip für die Beschreibung wird bei Focus oder Hover der **Abbr**-Komponente angezeigt und vorgelesen."
      },
      "attributes": [
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "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": "kol-accordion",
      "description": {
        "kind": "markdown",
        "value": "Synonyme: Collapse\n\nDie **Accordion**-Komponente ist ein Aufklapp-Menü. Klickt man auf den Kopfbereich, bestehend aus Icon und Überschrift, klappt der Inhalt mit zusätzlichen Informationen auf. Somit ist es ein interaktives Navigationselement, welches dazu dient, umfangreiche Inhalte platzsparend darzustellen.\n\nAccordions kommen immer dann zum Einsatz, wenn einem thematischen Oberbegriff zugeordnete Inhalte angezeigt oder verborgen werden sollen. Sie erlauben umfangreichere Detailinformationen zu einem Oberbegriff, als es aus Gründen der Übersichtlichkeit eigentlich sinnvoll wäre. Sie überlassen es den Besucher:innen selbst, ob sie sich diese Informationen anzeigen lassen möchten."
      },
      "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": "Synonyme: Message\n\nDie **Alert**-Komponente gibt ein optisches Feedback an die Nutzer:innen. Sie besteht aus einem farblich gestalteten Container, einer Überschrift, einem Inhaltstext sowie einem Icon. Das verwendete Icon und die farbliche Gestaltung sind abhängig vom Typ `_type` des 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": "Synonyme: Persona\n\nDie **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist."
      },
      "attributes": [
        {
          "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": "Mit **Badges** können Sie bestimmte Informationen auf Ihrer Webseite optisch hervorheben.\nKoliBri bietet neben der Angabe der Hintergrundfarbe und automatischer Berechnung der Textfarbe auch die Möglichkeit, einem Badge ein Icon und/oder einen anderen Schriftschnitt mitzugeben."
      },
      "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": "link"
            },
            {
              "name": "tab"
            },
            {
              "name": "treeitem"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            },
            {
              "name": "secondary"
            },
            {
              "name": "normal"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "danger"
            },
            {
              "name": "ghost"
            },
            {
              "name": "custom"
            }
          ]
        }
      ]
    },
    {
      "name": "kol-breadcrumb",
      "description": {
        "kind": "markdown",
        "value": "Mit Hilfe der **Breadcrumb**-Komponente kann der Pfad zur aktuellen Position einer Webseite in einer hierarchischen Struktur dargestellt werden."
      },
      "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": "**Buttons** dienen dazu, Benutzer:innen Auswahlmöglichkeiten für Aktionen anzuzeigen und diese in einer klaren Hierarchie anzuordnen. Sie helfen Nutzer:innen, die wichtigsten Aktionen einer Seite oder innerhalb eines Viewports zu finden und ermöglichen es ihnen, diese Aktionen auszuführen. Die Beschriftung des Buttons wird verwendet, um Nutzer:innen klar anzuzeigen, welche Aktion ausgelöst wird. Buttons ermöglichen es Nutzer:innen, eine Änderung zu bestätigen, Schritte in einer Aufgabe abzuschließen oder Entscheidungen zu treffen."
      },
      "attributes": [
        {
          "name": "_access-key",
          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
        },
        {
          "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": "_id",
          "description": "Defines the internal ID of the primary component element."
        },
        {
          "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": "button"
            },
            {
              "name": "link"
            },
            {
              "name": "tab"
            },
            {
              "name": "treeitem"
            }
          ]
        },
        {
          "name": "_short-key",
          "description": "Adds a visual short key hint to the component."
        },
        {
          "name": "_tab-index",
          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
        },
        {
          "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 that the button emits on click."
        },
        {
          "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-group",
      "description": {
        "kind": "markdown",
        "value": "**Buttons** dienen dazu, Nutzer:innen Auswahlmöglichkeiten für Aktionen anzuzeigen und diese in einer klaren Hierarchie anzuordnen. Sie helfen den Nutzer:innen, die wichtigsten Aktionen einer Seite oder innerhalb eines Applikation zu finden und ermöglichen es ihm, diese Aktionen auszuführen.\n\nDie **ButtonGroup**-Komponente fasst mehrere Buttons zu einer optischen und funktionalen Einheit zusammen."
      },
      "attributes": []
    },
    {
      "name": "kol-button-link",
      "description": {
        "kind": "markdown",
        "value": "Der ButtonLink ist semantisch ein Button und hat das Design eines Links. Hierzu werden alle relevanten Properties der Button-Komponente übernommen und um die Design-bestimmenden Properties des Links erweitert.\n\nEinen Button kann man deaktivieren und daher gibt es bei einem ButtonLink das Property `_disabled`. Wie das optisch ausgestaltet wird, entscheidet die UX-Designer:in.\n\nStatt, wie bei einem Link, `_href` zu verwenden, wird bei einem ButtonLink das Property über den `Click-Callback` gesteuert. Hierzu wird das `_on`-Property verwendet.\n\nBei einem Link gibt es das Property `target`, welches ggf. den Link in einem neuen Fenster/Tab öffnet. Das Verhalten ist aktuell noch nicht umgesetzt.\n\nDa der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `secondary` usw.) angeboten wird, stehen die Properties `_customClass` und `_variant` nicht zur Verfügung."
      },
      "attributes": [
        {
          "name": "_access-key",
          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
        },
        {
          "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": "_id",
          "description": "Defines the internal ID of the primary component element."
        },
        {
          "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": "button"
            },
            {
              "name": "link"
            },
            {
              "name": "tab"
            },
            {
              "name": "treeitem"
            }
          ]
        },
        {
          "name": "_short-key",
          "description": "Adds a visual short key hint to the component."
        },
        {
          "name": "_tab-index",
          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
        },
        {
          "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 that the button emits on click."
        }
      ]
    },
    {
      "name": "kol-card",
      "description": {
        "kind": "markdown",
        "value": "Um einzelne Bereiche Ihrer Webseite optisch hervorzuheben, bietet sich die **Card**-Komponente an. Mit ihrer Hilfe können Sie Ihre Inhalte sehr einfach strukturieren.\n\nDie **Card**-Komponente besteht aus einem **_Titel-Bereich_**, einem **_Inhalts-Bereich_**.\n\nDer **Titel-Bereich** wird in einer größeren Schrift dargestellt. Der **Inhalts-Bereich** ist optisch durch eine horizontale Trennlinie unterhalb des Titel-Bereichs abgetrennt und wird in der Standardschrift ausgegeben."
      },
      "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": "Synonyme: Autocomplete, Select, Dropdown\n\n<kol-alert _type=\"warning\" _variant=\"card\">\n  <kol-badge _color=\"#476af5\" _label=\"Preview\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n</kol-alert>\n\nDie **Combobox**-Komponente erzeugt eine Auswahlliste, die ein Eingabefeld mit einer darunter angezeigten Liste von auswählbaren Optionen kombiniert."
      },
      "attributes": [
        {
          "name": "_access-key",
          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
        },
        {
          "name": "_alert",
          "description": "Defines whether the screen-readers should read out the notification."
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_hide-error",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "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": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_id",
          "description": "Defines the internal ID of the primary component element."
        },
        {
          "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": "default"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            },
            {
              "name": "msg"
            }
          ]
        },
        {
          "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 short key hint to the component."
        },
        {
          "name": "_suggestions",
          "description": "Suggestions to provide for the input."
        },
        {
          "name": "_tab-index",
          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
        },
        {
          "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 input."
        }
      ]
    },
    {
      "name": "kol-details",
      "description": {
        "kind": "markdown",
        "value": "Synonyme: Disclosure, Collapse, Summary Detail\n\nMit Hilfe der **Detail**-Komponente können weiterführende Informationen zunächst mit einem kurzen Einleitungstext angezeigt werden, die erst nach Klick\ndurch die Nutzer:innen auf ein Pfeil-Icon in voller Größe aufgeklappt werden.\n\nDie **Detail**-Komponente stellt sich standardmäßig als einzeiliges Layout-Element dar, das aus einem Pfeil-Icon und einem nachfolgenden,\nkurzen Einleitungstext gebildet wird. Der eigentliche Inhalt der Komponente wird erst nach Klick auf den Kopfbereich nach unten hin geöffnet. Das Pfeil-Icon ändert dabei\nseine Ausrichtung von **_rechts_** nach **_unten_**.\nAnalog lässt sich die Komponente auch wieder schließen und der Inhalt damit verbergen."
      },
      "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-drawer",
      "description": {
        "kind": "markdown",
        "value": "Synonyme: Modal, Modal Dialog, Corner Dialog, Prompt\n\n<kol-alert _type=\"warning\" _variant=\"card\">\n  <kol-badge _color=\"#476af5\" _label=\"Preview\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da die Barrierefreiheitstests noch ausstehen. Die verschiedenen Tests können aufgrund der Modularität bei neuen Komponenten und Funktionalitäten meist erst nach einem Release erfolgen. Wir empfehlen daher, die Komponente noch nicht in Produktion zu verwenden.\n</kol-alert>\n\nMithilfe der **Drawer**-Komponente können zusätzliche Informationen oder auch Navigationselemente in einem ausklappbaren Seitenfenster angezeigt werden. Ein offener Drawer kann als Modal (`_modal`) via ESC geschlossen werden.\n\nDie **Drawer**-Komponente ist standardmäßig versteckt. Sie wird i.d.R. erst nach Klick auf einen Button oder sonstigem Trigger angezeigt bzw. controlled mit dem Attribut `_open` gesteuert.\n\n```html\n<kol-drawer _label=\"Drawer\" _open _modal _align=\"top\"></kol-drawer>\n```"
      },
      "attributes": [
        {
          "name": "_align",
          "description": "Defines the visual orientation of the component.",
          "values": [
            {
              "name": "bottom"
            },
            {
              "name": "left"
            },
            {
              "name": "right"
            },
            {
              "name": "top"
            }
          ]
        },
        {
          "name": "_label",
          "description": "Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.)."
        },
        {
          "name": "_modal",
          "description": ""
        },
        {
          "name": "_open",
          "description": "Opens/expands the element when truthy, closes/collapses when falsy."
        }
      ]
    },
    {
      "name": "kol-form",
      "description": {
        "kind": "markdown",
        "value": "Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinweistext für Pflichtfelder korrekt zu positionieren und die Events `submit` und `reset` weiterzuleiten."
      },
      "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": "Die **Heading**-Komponente kann überall dort verwendet werden, wo eine Überschrift angezeigt werden soll. Durch die Verwendung der unterschiedlichen Größen, lassen sich Inhalte klar strukturieren und Seiten wirkungsvoll und abwechslungsreich präsentieren. Sie trennt Styling von Semantik und ermöglicht Flexibilität."
      },
      "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": "_variant",
          "description": "Defines which variant should be used for presentation.",
          "values": [
            {
              "name": "h1"
            },
            {
              "name": "h2"
            },
            {
              "name": "h3"
            },
            {
              "name": "h4"
            },
            {
              "name": "h5"
            },
            {
              "name": "h6"
            },
            {
              "name": "strong"
            }
          ]
        }
      ]
    },
    {
      "name": "kol-icon",
      "description": {
        "kind": "markdown",
        "value": "Mit Hilfe der **Icon**-Komponente können Icons aus eingebundenen Icon-Fonts an beliebigen Positionen dargestellt werden. Die Ausgabe des Icon kann über das Attribut **`_icon`** gesteuert werden und erfolgt durch das Attribut **`_label`** barrierefrei. Die Ausgabe erfolgt standardmäßig als _`inline`_-Element.\n\nAktuell werden die Icons von <kol-link _href=\"https://microsoft.github.io/vscode-codicons/dist/codicon.html\" _target=\"_blank\" _label=\"Codicons\"></kol-link> unterstützt.\n\n<kol-alert _heading=\"Hinweis\" _type=\"info\">Es ist wichtig, dass in der Rahmenseite (`index.html`) die CSS-Dateie(n) der Icon-Font(s) eingebunden ist/sind.</kol-alert>"
      },
      "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": "Synonyme: Img, Thumbnail\n\n> <kol-badge _label=\"untested\"></kol-badge> Diese neue Komponente wird als ungetestet markiert, da der vollständige Barrierefreiheitstest noch aussteht. Der vollständige Test kann bei neuen Komponenten und Funktionalitäten auch erst nach einem abgeschlossenen Release erfolgen.\n\nDie **Image**-Komponente dient dazu, Bilder darzustellen."
      },
      "attributes": [
        {
          "name": "_alt",
          "description": "Setzt den alternativen Text."
        },
        {
          "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": "Setzt eine Liste von Quell-URLs mit Breiten der Bilder."
        }
      ]
    },
    {
      "name": "kol-indented-text",
      "description": {
        "kind": "markdown",
        "value": "Heben Sie einzelne Informationen auf Ihrer Webseite optisch mit der **IndentedText**-Komponente hervor. Die Komponente eignet sich nicht nur für besondere Abschnitte auf der Webseite, sondern auch beispielsweise für Zitate (für verlinkte Zitate kann auch die <kol-link _href=\"/docs/components/quote/\" _label=\"/docs/components/quote/\" _label=\"kol-quote-Komponente\"></kol-link> verwendet werden.)."
      },
      "attributes": []
    },
    {
      "name": "kol-input-checkbox",
      "description": {
        "kind": "markdown",
        "value": "Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken aktiviert und wieder deaktiviert wird. In aktiviertem Zustand befindet sich ein farbiger Haken in der Box."
      },
      "attributes": [
        {
          "name": "_access-key",
          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
        },
        {
          "name": "_alert",
          "description": "Defines whether the screen-readers should read out the notification."
        },
        {
          "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": "_error",
          "description": "Defines the error message text."
        },
        {
          "name": "_hide-error",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "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": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_id",
          "description": "Defines the internal ID of the primary component element."
        },
        {
          "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": "default"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            },
            {
              "name": "msg"
            }
          ]
        },
        {
          "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 short key hint to the component."
        },
        {
          "name": "_tab-index",
          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
        },
        {
          "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 input."
        },
        {
          "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": "Der Input-Typ **Color** erzeugt ein Auswahlfeld für die Definition einer beliebigen Farbe. Die Eingabe der Farbe kann in hexadezimaler Schreibweise, in RGB-Schreibweise oder in HSL-Schreibweise erfolgen. Möglich ist die Auswahl einer Farbe über einen Picker oder auch die exakte Eingabe von Farbwerten."
      },
      "attributes": [
        {
          "name": "_access-key",
          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
        },
        {
          "name": "_alert",
          "description": "Defines whether the screen-readers should read out the notification."
        },
        {
          "name": "_auto-complete",
          "description": "Defines whether the input can be auto-completed.",
          "values": [
            {
              "name": "off"
            },
            {
              "name": "on"
            }
          ]
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_error",
          "description": "Defines the error message text."
        },
        {
          "name": "_hide-error",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "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": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_id",
          "description": "Defines the internal ID of the primary component element."
        },
        {
          "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": "default"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            },
            {
              "name": "msg"
            }
          ]
        },
        {
          "name": "_name",
          "description": "Defines the technical name of an input field."
        },
        {
          "name": "_short-key",
          "description": "Adds a visual short key hint to the component."
        },
        {
          "name": "_smart-button",
          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
          "values": [
            {
              "name": "link"
            },
            {
              "name": "tab"
            },
            {
              "name": "treeitem"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            },
            {
              "name": "secondary"
            },
            {
              "name": "normal"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "danger"
            },
            {
              "name": "ghost"
            },
            {
              "name": "custom"
            }
          ]
        },
        {
          "name": "_suggestions",
          "description": "Suggestions to provide for the input."
        },
        {
          "name": "_tab-index",
          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
        },
        {
          "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 input."
        }
      ]
    },
    {
      "name": "kol-input-date",
      "description": {
        "kind": "markdown",
        "value": "Synonyme: Date Picker, Datetime Picker, Week Picker Month Picker, Time Picker, Calendar\n\nDer Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können konkrete Daten sein, aber auch Wochen, Monate oder Zeitangaben."
      },
      "attributes": [
        {
          "name": "_access-key",
          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
        },
        {
          "name": "_alert",
          "description": "Defines whether the screen-readers should read out the notification."
        },
        {
          "name": "_auto-complete",
          "description": "Defines whether the input can be auto-completed.",
          "values": [
            {
              "name": "off"
            },
            {
              "name": "on"
            }
          ]
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_error",
          "description": "Defines the error message text."
        },
        {
          "name": "_hide-error",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "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": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_id",
          "description": "Defines the internal ID of the primary component element."
        },
        {
          "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 largest possible input value."
        },
        {
          "name": "_min",
          "description": "Defines the smallest possible input value."
        },
        {
          "name": "_msg",
          "description": "Defines the properties for a message rendered as Alert component.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            },
            {
              "name": "msg"
            }
          ]
        },
        {
          "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 short key hint to the component."
        },
        {
          "name": "_smart-button",
          "description": "Allows to add a button with an arbitrary action within the element (_hide-label only).",
          "values": [
            {
              "name": "link"
            },
            {
              "name": "tab"
            },
            {
              "name": "treeitem"
            },
            {
              "name": "reset"
            },
            {
              "name": "submit"
            },
            {
              "name": "secondary"
            },
            {
              "name": "normal"
            },
            {
              "name": "tertiary"
            },
            {
              "name": "danger"
            },
            {
              "name": "ghost"
            },
            {
              "name": "custom"
            }
          ]
        },
        {
          "name": "_step",
          "description": "Defines the step size for value changes."
        },
        {
          "name": "_suggestions",
          "description": "Suggestions to provide for the input."
        },
        {
          "name": "_tab-index",
          "description": "Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)"
        },
        {
          "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 input."
        }
      ]
    },
    {
      "name": "kol-input-email",
      "description": {
        "kind": "markdown",
        "value": "Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails."
      },
      "attributes": [
        {
          "name": "_access-key",
          "description": "Defines which key combination can be used to trigger or focus the interactive element of the component."
        },
        {
          "name": "_alert",
          "description": "Defines whether the screen-readers should read out the notification."
        },
        {
          "name": "_auto-complete",
          "description": "Defines whether the input can be auto-completed.",
          "values": [
            {
              "name": "off"
            },
            {
              "name": "on"
            }
          ]
        },
        {
          "name": "_disabled",
          "description": "Makes the element not focusable and ignore all events."
        },
        {
          "name": "_error",
          "description": "Defines the error message text."
        },
        {
          "name": "_has-counter",
          "description": "Shows the character count on the lower border of the input."
        },
        {
          "name": "_hide-error",
          "description": "Hides the error message but leaves it in the DOM for the input's aria-describedby."
        },
        {
          "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": "_hint",
          "description": "Defines the hint text."
        },
        {
          "name": "_icons",
          "description": "Defines the icon classnames (e.g. `_icons=\"fa-solid fa-user\"`)."
        },
        {
          "name": "_id",
          "description": "Defines the internal ID of the primary component element."
        },
        {
          "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": "_msg",
          "description": "Defines the properties for a message rendered as Alert component.",
          "values": [
            {
              "name": "default"
            },
            {
              "name": "info"
            },
            {
              "name": "success"
            },
            {
              "name": "warning"
            },
            {
              "name": "msg"
            }
          ]
        },
        {
          "name": "_multiple",
          "description": "Makes the input accept multiple inputs."
        },
        {
          "name": "_name",