@public-ui/components 2.1.4-alpha.1 → 2.1.4

package/custom-elements.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.4-alpha.1",
+  "version": "2.1.4",
   "tags": [
     {
       "name": "kol-abbr",
@@ -32,7 +32,7 @@
     },
     {
       "name": "kol-accordion",
-      "description": "Die **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.",
+      "description": "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",
@@ -63,7 +63,18 @@
         }
       ],
       "events": [],
-      "methods": [],
+      "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -75,7 +86,7 @@
     },
     {
       "name": "kol-alert",
-      "description": "Die **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.",
+      "description": "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",
@@ -132,7 +143,7 @@
     },
     {
       "name": "kol-alert-wc",
-      "description": "Die **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.",
+      "description": "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",
@@ -189,7 +200,7 @@
     },
     {
       "name": "kol-avatar",
-      "description": "Die **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist.",
+      "description": "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",
@@ -212,7 +223,7 @@
     },
     {
       "name": "kol-avatar-wc",
-      "description": "Die **Avatar**-Komponente zeigt entweder ein kleines Bild des Users oder dessen Initialen an, falls kein Bild vorhanden ist.",
+      "description": "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",
@@ -406,10 +417,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<Stringified<StencilUnknown> | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [],
@@ -537,10 +558,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<Stringified<StencilUnknown> | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [],
@@ -585,7 +616,7 @@
     },
     {
       "name": "kol-combobox",
-      "description": "<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.",
+      "description": "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",
@@ -711,7 +742,7 @@
     },
     {
       "name": "kol-details",
-      "description": "Mit 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.",
+      "description": "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",
@@ -735,7 +766,18 @@
         }
       ],
       "events": [],
-      "methods": [],
+      "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
+        }
+      ],
       "slots": [
         {
           "name": "",
@@ -747,7 +789,7 @@
     },
     {
       "name": "kol-drawer",
-      "description": "<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\nMit Hilfe 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. Die **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```",
+      "description": "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\nMit Hilfe 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. Die **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",
@@ -936,7 +978,7 @@
     },
     {
       "name": "kol-image",
-      "description": "> <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.",
+      "description": "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",
@@ -1123,10 +1165,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<StencilUnknown>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -1260,10 +1312,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<string | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -1277,7 +1339,7 @@
     },
     {
       "name": "kol-input-date",
-      "description": "Der Input-Typ **Date** erzeugt ein Eingabefeld für Datumswerte. Diese können konkrete Daten sein, aber auch Wochen, Monate oder Zeitangaben.",
+      "description": "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",
@@ -1436,10 +1498,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<string | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -1619,10 +1691,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<string | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -1636,7 +1718,7 @@
     },
     {
       "name": "kol-input-file",
-      "description": "Der Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es können eine oder auch mehrere Dateien ausgewählt werden.",
+      "description": "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.",
       "attributes": [
         {
           "name": "_accept",
@@ -1764,10 +1846,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<FileList | null | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -1939,10 +2031,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<string | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -2116,10 +2218,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<string | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -2133,7 +2245,7 @@
     },
     {
       "name": "kol-input-radio",
-      "description": "Die 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/>",
+      "description": "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/>",
       "attributes": [
         {
           "name": "_access-key",
@@ -2249,10 +2361,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<StencilUnknown | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -2266,7 +2388,7 @@
     },
     {
       "name": "kol-input-range",
-      "description": "Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Verschieben eines Reglers verändert werden können.",
+      "description": "Synonyme: Slider\n\nDer Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Verschieben eines Reglers verändert werden können.",
       "attributes": [
         {
           "name": "_access-key",
@@ -2398,10 +2520,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<number | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -2415,7 +2547,7 @@
     },
     {
       "name": "kol-input-text",
-      "description": "Der 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.",
+      "description": "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.",
       "attributes": [
         {
           "name": "_access-key",
@@ -2581,10 +2713,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<string | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -2702,7 +2844,18 @@
         }
       ],
       "events": [],
-      "methods": [],
+      "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
+        }
+      ],
       "slots": [],
       "cssProperties": [],
       "cssParts": []
@@ -2801,7 +2954,18 @@
         }
       ],
       "events": [],
-      "methods": [],
+      "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
+        }
+      ],
       "slots": [],
       "cssProperties": [],
       "cssParts": []
@@ -2861,7 +3025,7 @@
     },
     {
       "name": "kol-modal",
-      "description": "Vielen Dank, dass Sie diese Komponente zur Umsetzung eines Modals verwenden wollen. Inzwischen ist das native `<dialog>` Element sehr gut unterstützt (<kol-link _href=\"https://caniuse.com/?search=dialog\" _target=\"_blank\" _label=\"caniuse\"></kol-link>), barrierefrei, einfach zu benutzen und performanter (da nativ), daher empfehlen wir dieses zu verwenden. Wenn Sie aufgrund von Abwärtskompatibilität, oder weil Sie die **Modal**-Komponente bereits eingebaut haben, die Dokumentation zu unserem KolModal suchen, finden Sie diese etwas weiter unten. Die **Modal**-Komponente wird in Version 2 noch zur Verfügung stehen.",
+      "description": "Synonyme: Dialog, Prompt",
       "attributes": [
         {
           "name": "_label",
@@ -2890,7 +3054,7 @@
     },
     {
       "name": "kol-nav",
-      "description": "Eine **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.",
+      "description": "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.",
       "attributes": [
         {
           "name": "_collapsible",
@@ -3133,7 +3297,7 @@
     },
     {
       "name": "kol-select",
-      "description": "Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können.",
+      "description": "Synonyme: Datalist, Dropdown\n\nDie **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere vorgegebene Möglichkeiten ausgewählt werden können.",
       "attributes": [
         {
           "name": "_access-key",
@@ -3261,10 +3425,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<Stringified<W3CInputValue[]> | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -3301,7 +3475,7 @@
     },
     {
       "name": "kol-spin",
-      "description": "Ladeanzeigen, 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.",
+      "description": "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.",
       "attributes": [
         {
           "name": "_show",
@@ -3466,7 +3640,7 @@
     },
     {
       "name": "kol-table",
-      "description": "<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-stateless/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>",
+      "description": "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-stateless/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>",
       "attributes": [
         {
           "name": "_allow-multi-sort",
@@ -3532,7 +3706,7 @@
     },
     {
       "name": "kol-table-stateful",
-      "description": "<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>",
+      "description": "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>",
       "attributes": [
         {
           "name": "_allow-multi-sort",
@@ -3604,7 +3778,7 @@
     },
     {
       "name": "kol-table-stateless",
-      "description": "<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.",
+      "description": "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.",
       "attributes": [
         {
           "name": "_data",
@@ -3651,7 +3825,7 @@
     },
     {
       "name": "kol-table-stateless-wc",
-      "description": "<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.",
+      "description": "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.",
       "attributes": [
         {
           "name": "_data",
@@ -3698,7 +3872,7 @@
     },
     {
       "name": "kol-tabs",
-      "description": "Die **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.",
+      "description": "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.",
       "attributes": [
         {
           "name": "_align",
@@ -3884,10 +4058,20 @@
       ],
       "events": [],
       "methods": [
+        {
+          "name": "focus",
+          "description": "",
+          "signature": "focus() => Promise<void>"
+        },
         {
           "name": "getValue",
           "description": "",
           "signature": "getValue() => Promise<string | undefined>"
+        },
+        {
+          "name": "kolFocus",
+          "description": "",
+          "signature": "kolFocus() => Promise<void>"
         }
       ],
       "slots": [
@@ -3901,7 +4085,7 @@
     },
     {
       "name": "kol-toast-container",
-      "description": "Mit 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.",
+      "description": "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.",
       "attributes": [],
       "events": [],
       "methods": [
@@ -3939,7 +4123,7 @@
     },
     {
       "name": "kol-tooltip-wc",
-      "description": "<kol-alert _type=\"info\" _variant=\"card\">Die **Tooltip**-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung verwendet zu werden. Denn der Tooltip ist nur dann wirklich barrierefrei, wenn von einem Referenzelement auf das Tooltip verwiesen wird.</kol-alert>\n\nDie **Tooltip**-Komponente implementiert das Gegenstück zum `Aria-Label`. Es ist also explizit nur dafür vorgesehen, dem/der Nutzer:in ohne Screenreader die Beschriftung eines Elementes anzuzeigen.\n\nEin geöffneter Tooltip lässt sich mit der `Escape`-Taste schließen, um ggf. überlagerte Seiteninformationen wieder sichtbar zu machen.\n\n**Hinweis:** Damit der Tooltip korrekt ausgerichtet wird, darf das Referenz-Element nicht `display: inline` haben.",
+      "description": "Synonyme: Inline Dialog, Popover\n\n<kol-alert _type=\"info\" _variant=\"card\">Die **Tooltip**-Komponente wird innerhalb von KoliBri verwendet und ist nicht dafür vorgesehen in der Anwendungsentwicklung verwendet zu werden. Denn der Tooltip ist nur dann wirklich barrierefrei, wenn von einem Referenzelement auf das Tooltip verwiesen wird.</kol-alert>\n\nDie **Tooltip**-Komponente implementiert das Gegenstück zum `Aria-Label`. Es ist also explizit nur dafür vorgesehen, dem/der Nutzer:in ohne Screenreader die Beschriftung eines Elementes anzuzeigen.\n\nEin geöffneter Tooltip lässt sich mit der `Escape`-Taste schließen, um ggf. überlagerte Seiteninformationen wieder sichtbar zu machen.\n\n**Hinweis:** Damit der Tooltip korrekt ausgerichtet wird, darf das Referenz-Element nicht `display: inline` haben.",
       "attributes": [
         {
           "name": "_access-key",
@@ -3975,7 +4159,7 @@
     },
     {
       "name": "kol-tree",
-      "description": "<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.",
+      "description": "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.",
       "attributes": [
         {
           "name": "_label",
@@ -4104,7 +4288,7 @@
     },
     {
       "name": "kol-tree-wc",
-      "description": "<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.",
+      "description": "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.",
       "attributes": [
         {
           "name": "_label",

package/dist/cjs/{InternalUnderlinedAccessKey-9908abb2.js → InternalUnderlinedAccessKey-03d810c0.js}

@@ -1,4 +1,4 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
-"use strict";const index=require("./index-5cf289dd.js"),InternalUnderlinedAccessKey=({accessKey:e,label:n})=>{let[l,...t]=n.split(e);return 0===t.length&&(e=e.toUpperCase(),[l,...t]=n.split(e)),0===t.length&&(e=e.toLowerCase(),[l,...t]=n.split(e)),index.h(index.Fragment,null,l,t.length?index.h(index.Fragment,null,index.h("u",null,e),t.join(e)):null)};exports.InternalUnderlinedAccessKey=InternalUnderlinedAccessKey;
+"use strict";const index=require("./index-1069403a.js"),InternalUnderlinedAccessKey=({accessKey:e,label:n})=>{let[l,...t]=n.split(e);return 0===t.length&&(e=e.toUpperCase(),[l,...t]=n.split(e)),0===t.length&&(e=e.toLowerCase(),[l,...t]=n.split(e)),index.h(index.Fragment,null,l,t.length?index.h(index.Fragment,null,index.h("u",null,e),t.join(e)):null)};exports.InternalUnderlinedAccessKey=InternalUnderlinedAccessKey;