@public-ui/components 2.2.1 → 3.0.0-alpha.1

package/doc/tree.md

@@ -1,73 +1,4 @@
-# Tree
-
-Synonyme: List, Navigation
-
-<kol-alert _type="warning" _variant="card">
-  <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.
-</kol-alert>
-
-Die Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in der Hierarchie kann Kindelemente haben, und Elemente, die Kinder haben, können erweitert oder reduziert werden, um die Kinder anzuzeigen oder zu verbergen.
-
-### Code
-
-```html
-<kol-tree _label="Sitemap">
-	<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
-	<kol-tree-item _label="Page 1" _href="#" _open>
-		<kol-tree-item _label="Subpage 1" _href="#" _open>
-			<kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
-			<kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
-			<kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
-			<kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
-		</kol-tree-item>
-		<kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
-		<kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
-		<kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
-	</kol-tree-item>
-	<kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
-</kol-tree>
-```
-
-### Beispiel
-
-<kol-tree _label="Sitemap">
-	<kol-tree-item _label="Home" _href="#" _active></kol-tree-item>
-  <kol-tree-item _label="Page 1" _href="#" _open>
-    <kol-tree-item _label="Subpage 1" _href="#" _open>
-      <kol-tree-item _label="Product 1" _href="#"></kol-tree-item>
-      <kol-tree-item _label="Product 2" _href="#"></kol-tree-item>
-      <kol-tree-item _label="Product 3" _href="#"></kol-tree-item>
-      <kol-tree-item _label="Product 4" _href="#"></kol-tree-item>
-    </kol-tree-item>
-    <kol-tree-item _label="Subpage 2" _href="#"></kol-tree-item>
-    <kol-tree-item _label="Subpage 3" _href="#"></kol-tree-item>
-    <kol-tree-item _label="Subpage 4" _href="#"></kol-tree-item>
-  </kol-tree-item>
-  <kol-tree-item _label="Page 2" _href="#"></kol-tree-item>
-</kol-tree>
-
-## Verwendung
-
-Eine **Tree**-Komponente wird verwendet, um komplexe, hierarchische Datenstrukturen visuell darzustellen und zu navigieren. Sie ermöglicht es Benutzern, sich effizient durch verschachtelte Informationen zu bewegen und bietet eine klare Übersicht über die Beziehungen zwischen den verschiedenen Elementen. Solche Komponenten sind nützlich in Anwendungen wie Navigatoren, Organisationsdiagrammen, Produktkatalogen und überall dort, wo eine strukturierte Darstellung von Daten erforderlich ist.
-Das **`_label`**-Attribut wird für den Text und das **`_href`**-Attribut für den Link des Navigationspunkts genutzt. Zusätzlich lässt sich das aktive Element über das Attribut **`_active`** steuern, sowie im Standardzustand über das **`_open`** Attribut öffnen.
-
-### Tastatursteuerung
-
-| Taste          | Funktion                                                                                                                                                                                                                                                                                                                                                         |
-| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `Tab`          | Der Tree lässt sich zudem mittels Tabulator-Taste fokussieren.                                                                                                                                                                                                                                                                                                   |
-| `Pfeil-Tasten` | Die Pfeiltasten können für die Navigation der Elemente im Tree verwendet werden, um das Untermenü zu öffnen oder zu schließen sowie zwischen den Navigationspunkten zu springen. Dabei wird die linke/rechte Pfeiltaste für das Öffnen oder Schließen des Untermenüs und die oben/unten Pfeiltaste für das Wechseln zwischen den Navigationselementen verwendet. |
-| `Enter`        | Selektiert das derzeitig fokussierte Element und navigiert, falls das **`_href`**-Attribut gesetzt wurde.                                                                                                                                                                                                                                                        |
-| `Home`         | Fokussiert das erste Element in der Tree-Komponenten                                                                                                                                                                                                                                                                                                             |
-| `End`          | Fokussiert das letzte Element in der Tree-Komponenten                                                                                                                                                                                                                                                                                                            |
-| `*`            | Öffnet, alle Geschwister-Elemente der derzeitig fokussierten Ebene                                                                                                                                                                                                                                                                                               |
-
-Zusätzlich können Elemente in der **Tree**-Komponente mit Alphanumerischen-Tasten gesucht und fokussiert werden. In dem oben gennanten Beispiel, würde durch die Taste `S` das Element mit dem **`_label`** `Subpage 1` fokussiert werden und bei wiederholten Drücken der selben Taste die `Subpage 2`, etc.
-
-## Links und Referenzen
-
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tree_role" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/WAI/ARIA/apg/patterns/treeview/" _target="_blank"></kol-link>
+# kol-tree
 
 <!-- Auto Generated Below -->
 

package/doc/version.md

@@ -1,26 +1,4 @@
-# Version
-
-Die **Version**-Komponente stellt kurze Inhalte auf einem farbigen Hintergrund dar. Die **Version**-Komponente ist mit der **Tag**-Komponente eng verwandt, bietet aber nur ein Attribut zur Konfiguration. Sie ist optimiert für die Angabe z.B. von Versionen einer Seite.
-
-## Konstruktion
-
-### Code
-
-```html
-<div>
-	<kol-version _label="1.44.0"></kol-version>
-</div>
-```
-
-### Beispiel
-
-<kol-version _label="1.44.0"></kol-version>
-
-## Verwendung
-
-Für die Konfiguration steht das Attribut **`_label`** zur Verfügung und nimmt einen beliebigen Text auf, dem in der Komponente ein `v` vorgestellt wird.
-
-Die **Version** wird standardmäßig als **_Inline-Element_** ausgegeben.
+# kol-version
 
 <!-- Auto Generated Below -->
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/components",
-  "version": "2.2.1",
+  "version": "3.0.0-alpha.1",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {

package/vscode-custom-data.json

@@ -5,30 +5,12 @@
       "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."
+        "value": ""
       },
       "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"
-            }
-          ]
         }
       ]
     },
@@ -36,7 +18,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -61,7 +43,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -119,7 +101,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -136,7 +118,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -196,7 +178,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -213,7 +195,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -360,7 +342,7 @@
       "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."
+        "value": ""
       },
       "attributes": []
     },
@@ -368,7 +350,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -484,7 +466,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -505,7 +487,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -621,7 +603,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -646,7 +628,7 @@
       "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```"
+        "value": ""
       },
       "attributes": [
         {
@@ -685,7 +667,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -698,7 +680,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -746,7 +728,7 @@
       "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>"
+        "value": ""
       },
       "attributes": [
         {
@@ -763,7 +745,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -800,7 +782,7 @@
       "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.)."
+        "value": ""
       },
       "attributes": []
     },
@@ -808,7 +790,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -955,7 +937,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -1118,7 +1100,7 @@
       "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."
+        "value": ""
       },
       "attributes": [
         {
@@ -1322,7 +1304,7 @@
       "name": "kol-input-email",
       "description": {
         "kind": "markdown",
-        "value": "Der Input-Typ **E-Mail** erzeugt ein Eingabefeld für E-Mails."
+        "value": ""
       },
       "attributes": [
         {
@@ -1513,7 +1495,7 @@
       "name": "kol-input-file",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Upload, File Uploader, File Picker, File Selector\n\nDer Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden."
+        "value": ""
       },
       "attributes": [
         {
@@ -1672,7 +1654,7 @@
       "name": "kol-input-number",
       "description": {
         "kind": "markdown",
-        "value": "Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen."
+        "value": ""
       },
       "attributes": [
         {
@@ -1859,7 +1841,7 @@
       "name": "kol-input-password",
       "description": {
         "kind": "markdown",
-        "value": "Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe wird über Punktsymbole maskiert."
+        "value": ""
       },
       "attributes": [
         {
@@ -2054,7 +2036,7 @@
       "name": "kol-input-radio",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Choice Group, Radio Buttons\n\nDie Komponente **InputRadio** besteht aus einer Sammlung von Radio-Elementen und stellt so eine Auswahlmöglichkeit zwischen verschiedenen Werten dar. Es kann immer nur ein einzelner Wert zur gleichen Zeit ausgewählt werden. Ausgewählte Radio-Elemente werden i.d.R. mit einem gefüllten und optisch hervorgehobenen Kreis dargestellt.\n\n<kol-alert _alert _heading=\"Hinweis\" _level=\"1\" _type=\"info\">\n  Das Input-Radio dient der Abbildung einer Auswahlmöglichkeit bei der mindestens und maximal eine Auswahl getroffen werden kann. Das bedeutet, dass ein Input-Radio nicht einzeln vorkommen kann. Aufgrund dessen haben wir die Komponente als Listen-Komponente umgesetzt.\n</kol-alert><br/>"
+        "value": ""
       },
       "attributes": [
         {
@@ -2178,7 +2160,7 @@
       "name": "kol-input-range",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Slider\n\nDer Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Verschieben eines Reglers verändert werden können."
+        "value": ""
       },
       "attributes": [
         {
@@ -2314,7 +2296,7 @@
       "name": "kol-input-text",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Text Field\n\nDer Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe, URLs oder Telefonnummern.\n\nDie Komponente hat Known-Issues bezüglich Browserabhängigkeit und Barrierefreiheit. Näheres kann unter [KNOWN_ISSUES.md](https://github.com/public-ui/kolibri/blob/develop/KNOWN_ISSUES.md) nachgelssen werden."
+        "value": ""
       },
       "attributes": [
         {
@@ -2523,7 +2505,7 @@
       "name": "kol-kolibri",
       "description": {
         "kind": "markdown",
-        "value": "Diese Komponente implementiert das Logo von KoliBri."
+        "value": ""
       },
       "attributes": [
         {
@@ -2540,7 +2522,7 @@
       "name": "kol-link",
       "description": {
         "kind": "markdown",
-        "value": "Die **Link**-Komponente rendert einen auf Barrierefreiheit optimierten Link, der als Text, als Icon oder auch in Kombination ausgegeben werden kann."
+        "value": ""
       },
       "attributes": [
         {
@@ -2656,7 +2638,7 @@
       "name": "kol-link-button",
       "description": {
         "kind": "markdown",
-        "value": "Der LinkButton ist semantisch ein Link und hat das Design eines Buttons. Hierzu werden alle relevanten Properties der Link-Komponente übernommen und um die Design-bestimmenden Properties des Buttons erweitert.\nWeitere Informationen zum Aussehen finden Sie auf der <kol-link _href=\"/docs/components/button\" _label=\"Seite des Buttons\"></kol-link>."
+        "value": ""
       },
       "attributes": [
         {
@@ -2803,7 +2785,7 @@
       "name": "kol-link-group",
       "description": {
         "kind": "markdown",
-        "value": "Die **LinkGroup**-Komponente bildet einen umfassenden Container für eine vertikale oder horizontale Liste von Links. Sie rendert eine auf Barrierefreiheit optimierte Liste von Links, die als Text, als Icon oder auch in Kombination ausgegeben werden kann. Möglich ist auch die Ausgabe von versteckten Links."
+        "value": ""
       },
       "attributes": [
         {
@@ -2907,7 +2889,7 @@
       "name": "kol-nav",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Navigation, Menu, Sidebar, Dropdowns (menu)\n\nEine **Navigationsleiste** ist eine Gruppe von verwandten Links oder Navigationselementen, die durch Anklicken eine Aktion ausführen oder Inhalte anzeigen. Sie navigiert Nutzer:innen direkt zu bestimmten Inhalten der aktuellen Seite oder zu externen Seiten. Außerdem dient sie Nutzer:innen (ähnlich wie Registerkarten) als Steuerelement, um Inhalte anzuzeigen, auszublenden und zwischen ihnen zu wechseln.\n\n**KoliBri** stellt eine umfangreich konfigurierbare, vertikale oder horizontale **Navigationsleiste** zur Verfügung, die mehrere Ebenen darstellen und in der Breite variiert werden kann.\nÜbergeordnete Menüpunkte die Untermenüpunkte enthalten, werden mit einem **Plus-Icon** am rechten Rand angezeigt. Wird der übergeordnete Menüpunkt mit dem Plus-Icon geöffnet, ändert sich das Plus-Icon automatisch zu einem **Minus-Icon**, mit dem der Menüpunkt wieder geschlossen werden kann.\n\nAktive Menüpunkte werden mit einer farbigen Markierung dargestellt.\n\nÜber eine optionale Schaltfläche unterhalb der Navigation kann die Breite der **Nav**-Komponente verändert werden. In der kleinsten Breite werden die Menütitel ausgeblendet und nur\nnoch die Icons ausgegeben."
+        "value": ""
       },
       "attributes": [
         {
@@ -2952,7 +2934,7 @@
       "name": "kol-pagination",
       "description": {
         "kind": "markdown",
-        "value": "Mit Hilfe der **Paginierung**-Komponente lassen sich umfangreiche, aufgeteilte Inhalte, wie zum Beispiel Suchergebnisse, der Reihe nach durchlaufen."
+        "value": ""
       },
       "attributes": [
         {
@@ -3015,7 +2997,7 @@
       "name": "kol-progress",
       "description": {
         "kind": "markdown",
-        "value": "Die **Progress**-Komponente erzeugt einen Fortschrittsbalken, über den eine optische Rückmeldung gegeben werden kann."
+        "value": ""
       },
       "attributes": [
         {
@@ -3052,7 +3034,7 @@
       "name": "kol-quote",
       "description": {
         "kind": "markdown",
-        "value": "> <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 **Quote**-Komponente verfügt über zwei Varianten, eine kurze Fließtext-(`inline`) und eine eingerückte(`block`) Variante. Beide Varianten enthalten einen Link auf die Quelle des Zitates."
+        "value": ""
       },
       "attributes": [
         {
@@ -3085,7 +3067,7 @@
       "name": "kol-select",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Datalist, Dropdown\n\nDie **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können."
+        "value": ""
       },
       "attributes": [
         {
@@ -3209,7 +3191,7 @@
       "name": "kol-single-select",
       "description": {
         "kind": "markdown",
-        "value": "Die **SingleSelect**-Komponente erzeugt eine Auswahlbox, die ein Eingabefeld mit einer darunter angeordneten Liste von auswählbaren Optionen kombiniert. Sie bietet auch eine Suchfunktion, um die Auswahl zu filtern."
+        "value": ""
       },
       "attributes": [
         {
@@ -3325,7 +3307,7 @@
       "name": "kol-skip-nav",
       "description": {
         "kind": "markdown",
-        "value": "Mit Hilfe der **SkipNav**-Komponente kann eine versteckte Navigation erzeugt werden. Sie dient dazu, Sehbehinderten das Überspringen von Seitenbereichen zu ermöglichen. Sie wird nur nach Anspringen durch die **Tab-Taste** sichtbar."
+        "value": ""
       },
       "attributes": [
         {
@@ -3342,7 +3324,7 @@
       "name": "kol-spin",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Placeholder, Skeleton, Shimmer\n\nLadeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über Lade- oder Rechenvorgänge, die vom System ausgeführt werden. Der Fortschritt kann durch eine wiederholte Animation kommuniziert werden."
+        "value": ""
       },
       "attributes": [
         {
@@ -3370,7 +3352,7 @@
       "name": "kol-split-button",
       "description": {
         "kind": "markdown",
-        "value": "> <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 SplitButton-Komponente kann genutzt werden, um einen zweigeteilten Button darzustellen. Dabei wird der Primär-Button\nüblicherweise für eine Haupt-Aktion genutzt, während der sekundäre Button ein Kontext-Menü (\"Popover\") öffnet, hinter\ndem sich weitere Aktionen verbergen.\n\n- Der Sekundär-Button togglet grundsätzlich das Kontextmenü.\n- Für den Primär-Button kann ein individueller Event-Handler hinterlegt werden, wird dies nicht getan togglet er ebenfalls das Kontextmenü."
+        "value": ""
       },
       "attributes": [
         {
@@ -3522,7 +3504,7 @@
       "name": "kol-table",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Data Table, Details List, Data Grid\n\n<kol-alert _type=\"warning\" _variant=\"card\">\n  <kol-badge _color=\"#fb4509\" _label=\"Deprecated\"></kol-badge>KolTable ist veraltet, bitte stattdessen <kol-link _label=\"KolTableStateful\" _href=\"https://github.com/public-ui/kolibri/blob/develop/packages/components/src/components/table-stateful/readme.md\"></kol-link> verwenden, die API und Funktionalität sind identisch.\n</kol-alert>\n\nDie **Table**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.\n\n<kol-indented-text _summary=\"Backend-seitige Pagination\">\n\tBei sehr großen Datenmengen ist auch eine manuelle Nutzung der Table-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise \"manuell\" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine \"eigene\" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden.\n</kol-indented-text>"
+        "value": ""
       },
       "attributes": [
         {
@@ -3578,7 +3560,7 @@
       "name": "kol-table-stateful",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Data Table, Details List, Data Grid\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 **TableStateful**-Komponente dient primär der übersichtlichen Darstellung von Datenmengen. Dabei ist sie so ausgelegt, dass sie alle von den Daten abhängige Werte automatisch ermittelt und die Tabelle entsprechend darstellt. Hierzu gehören beispielsweise die optionalen Funktionalitäten Spaltensortierung oder Pagination.\n\n<kol-indented-text _summary=\"Backend-seitige Pagination\">\n\tBei sehr großen Datenmengen ist auch eine manuelle Nutzung der TableStateless-Komponente möglich. Das bedeutet, dass die Tabelle seitenweise \"manuell\" befüllt wird. Hierzu kann einfach anstatt der Table-Pagination eine \"eigene\" Pagination unter der Tabelle mittels der Pagination-Komponente verwendet werden. Eine mögliche Sortierung muss ebenfalls über die `onSort`-Events selber implementiert werden. Siehe [KolTableStateless](../table-stateless/readme.md).\n</kol-indented-text>"
+        "value": ""
       },
       "attributes": [
         {
@@ -3634,7 +3616,7 @@
       "name": "kol-table-stateless",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Data Table, Details List, Data Grid\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 **TableStateless**-Komponente ist für die reine Darstellung der KoliBri-Tabelle verantwortlich. Für eine Tabellen-Komponente, die Sortierung und Paginierung mit den zur Verfügung gestellten Daten automatisch übernehmen kann, siehe [KolTableStateful](../table-stateful/readme.md).\n\nTableStateless bietet sich insbesondere bei größeren Datenmengen an, wenn es nicht praktikabel ist, die komplette Datenmenge zur Filterung und Sortierung in den Browser auszuliefern."
+        "value": ""
       },
       "attributes": [
         {
@@ -3667,7 +3649,7 @@
       "name": "kol-tabs",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Navigation, Nav\n\nDie **Tabs**-Komponente wird verwendet, um verwandte Inhalte auf derselben Seite zu organisieren und zwischen ihnen zu navigieren. Tabs sorgen dafür, dass große Inhaltsmengen für Nutzer:innen leichter organisiert werden können. Tabs sind in Registerkartenleisten angeordnet, die als Registerkartengruppen bezeichnet werden, wobei die Registerkartenbeschriftung den Nutzer:innen einen Hinweis darauf gibt, welcher Inhalt angezeigt wird, wenn die Registerkarte ausgewählt wird."
+        "value": ""
       },
       "attributes": [
         {
@@ -3718,7 +3700,7 @@
       "name": "kol-textarea",
       "description": {
         "kind": "markdown",
-        "value": "Die Komponente **Textarea** stellt ein größeres Eingabefeld für Inhalte zur Verfügung. Im Gegensatz zum <kol-link _href=\"/docs/components/input-text\" _label=\"/docs/components/input-text\" _label=\"InputText\"></kol-link> können hier auch umfangreiche Inhalte eingegeben werden, die auch mit Zeilenumbrüchen versehen sein können."
+        "value": ""
       },
       "attributes": [
         {
@@ -3810,12 +3792,6 @@
           "name": "_resize",
           "description": "Defines whether and in which direction the size of the input can be changed by the user. (https://developer.mozilla.org/de/docs/Web/CSS/resize)\nIn version 3 (v3), horizontal resizing is abolished. The corresponding property is then reduced to the properties `vertical` (default) and `none`.",
           "values": [
-            {
-              "name": "both"
-            },
-            {
-              "name": "horizontal"
-            },
             {
               "name": "none"
             },
@@ -3872,7 +3848,7 @@
       "name": "kol-toast-container",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: Notification, Snackbar\n\nMit dem **Toast**-Service geben Sie ein optisches Feedback an die Nutzer:innen. Sie wird am Kopf des Browserfenster\nangezeigt, bis sie geschlossen wird. Werden mehrere Toasts geöffnet, ohne das die bisherigen geschlossen wurden, so werden diese untereinander angezeigt."
+        "value": ""
       },
       "attributes": []
     },
@@ -3880,7 +3856,7 @@
       "name": "kol-toolbar",
       "description": {
         "kind": "markdown",
-        "value": "<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 Komponente **Toolbar** ist eine Sammlung häufig verwendeter Steuerelemente für Schaltflächen und Links, die in einer kompakten visuellen Form zusammengefasst sind. Die Toolbar ist in der Regel eine Untermenge von Funktionen, die in einer Menüleiste zu finden sind, um den Aufwand für den Benutzer zu verringern.\n\n```html\n<kol-toolbar _label=\"Label\" _items=\"[{'_label': 'Button',},{'_href': '#','_label': 'Link'}]\"> </kol-toolbar>\n```"
+        "value": ""
       },
       "attributes": [
         {
@@ -3893,7 +3869,7 @@
       "name": "kol-tree",
       "description": {
         "kind": "markdown",
-        "value": "Synonyme: List, Navigation\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 Komponente **Tree** stellt eine hierarchische Liste dar. Jedes Element in der Hierarchie kann Kindelemente haben, und Elemente, die Kinder haben, können erweitert oder reduziert werden, um die Kinder anzuzeigen oder zu verbergen."
+        "value": ""
       },
       "attributes": [
         {
@@ -3906,7 +3882,7 @@
       "name": "kol-tree-item",
       "description": {
         "kind": "markdown",
-        "value": "Weitere Informationen zum Tree finden Sie auf der <kol-link _href=\"/docs/components/tree\" _label=\"Seite der Tree-Komponente\"></kol-link>."
+        "value": ""
       },
       "attributes": [
         {
@@ -3931,7 +3907,7 @@
       "name": "kol-tree-item-wc",
       "description": {
         "kind": "markdown",
-        "value": "Weitere Informationen zum Tree finden Sie auf der <kol-link _href=\"/docs/components/tree\" _label=\"Seite der Tree-Komponente\"></kol-link>."
+        "value": ""
       },
       "attributes": [
         {
@@ -3956,7 +3932,7 @@
       "name": "kol-version",
       "description": {
         "kind": "markdown",
-        "value": "Die **Version**-Komponente stellt kurze Inhalte auf einem farbigen Hintergrund dar. Die **Version**-Komponente ist mit der **Tag**-Komponente eng verwandt, bietet aber nur ein Attribut zur Konfiguration. Sie ist optimiert für die Angabe z.B. von Versionen einer Seite."
+        "value": ""
       },
       "attributes": [
         {

package/dist/cjs/Alert-621b81a8.js

@@ -1,4 +0,0 @@
-/*!
- * KoliBri - The accessible HTML-Standard
- */
-"use strict";const tslib_es6=require("./tslib.es6-16e4524f.js"),index=require("./index-f7982219.js"),clsx=require("./clsx-dd4d6dd1.js"),i18n=require("./i18n-1d085d07.js"),componentNames=require("./component-names-72b76dc7.js"),dev_utils=require("./dev.utils-58fde089.js"),Icon=({ariaLabel:e,icon:n})=>index.h(componentNames.KolIconTag,{class:"heading-icon",_label:e,_icons:n}),AlertIcon=({type:e,label:n})=>{switch(e){case"error":return index.h(Icon,{ariaLabel:i18n.translate("kol-error"),icon:"codicon codicon-error",label:n});case"info":return index.h(Icon,{ariaLabel:i18n.translate("kol-info"),icon:"codicon codicon-info",label:n});case"warning":return index.h(Icon,{ariaLabel:i18n.translate("kol-warning"),icon:"codicon codicon-warning",label:n});case"success":return index.h(Icon,{ariaLabel:i18n.translate("kol-success"),icon:"codicon codicon-pass",label:n});default:return index.h(Icon,{ariaLabel:i18n.translate("kol-message"),icon:"codicon codicon-comment",label:n})}},AlertIcon$1=AlertIcon,KolAlertFc=(e,n)=>{const{class:l={},type:o="default",variant:i="msg",label:a,hasCloser:c,alert:s,onAlertTimeout:t,onCloserClick:r,level:d}=e,u=tslib_es6.__rest(e,["class","type","variant","label","hasCloser","alert","onAlertTimeout","onCloserClick","level"]);if(s){try{dev_utils.Log.debug(["Navigator should vibrate ...",navigator.vibrate([100,75,100,75,100])])}catch(e){dev_utils.Log.debug("Navigator does not support vibration.")}setTimeout((()=>{null==t||t()}),1e4)}const b=Object.assign({class:clsx.clsx("kol-alert-wc","alert",o,i,{hasCloser:!!c},l),role:s?"alert":void 0},u);return index.h("div",Object.assign({},b),index.h("div",{class:"heading"},index.h(AlertIcon$1,{label:a,type:o}),index.h("div",{class:"heading-content"},a?index.h(componentNames.KolHeadingWcTag,{_label:a,_level:d}):null,"msg"===i&&index.h("div",{class:"content"},n)),c&&index.h(componentNames.KolButtonWcTag,{class:"close",_ariaDescription:(null==a?void 0:a.trim())||"",_hideLabel:!0,_icons:{left:{icon:"codicon codicon-close"}},_label:i18n.translate("kol-close-alert"),_on:{onClick:r},_tooltipAlign:"left"})),"card"===i&&index.h("div",{class:"content"},n))},KolAlertFc$1=KolAlertFc;exports.KolAlertFc=KolAlertFc$1;