npm - @public-ui/components - Versions diffs - 1.6.0-rc.16 → 1.6.0-rc.18 - Mend

@public-ui/components 1.6.0-rc.16 → 1.6.0-rc.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (468) hide show

package/doc/abbr.md CHANGED Viewed

@@ -38,7 +38,7 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 ## Links und Referenzen
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _label="https://developer.mozilla.org/de/docs/Web/HTML/Element/abbr" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/accordion.md CHANGED Viewed

@@ -115,7 +115,7 @@ Standardansicht gelegt.
 ## Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#accordion" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#accordion" _label="https://www.w3.org/TR/wai-aria-practices/#accordion" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/alert.md CHANGED Viewed

@@ -73,7 +73,7 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 ## Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#alert" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#alert" _label="https://www.w3.org/TR/wai-aria-practices/#alert" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/avatar.md CHANGED Viewed

@@ -1,7 +1,5 @@
 # kol-avatar-wc
 <!-- Auto Generated Below -->

package/doc/badge.md CHANGED Viewed

@@ -38,7 +38,7 @@ Ein Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objek
 Als String übergeben Sie die Iconklasse (z.B.: `_icon="codicon codicon-home`), das Icon wird links vom Text angezeigt.
 Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
 ### Nur Icon anzeigen

package/doc/breadcrumb.md CHANGED Viewed

@@ -36,7 +36,7 @@ Das gesamte JSON-Objekt muss in eckigen Klammern an das Attribut **`_links`** ü
 <b>Folgende Eigenschaften stehen zur Verfügung:</b>
 - **`_href`** übergibt den Link, der für dieses Element verwendet werden soll.
-- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> zur Verfügung
+- **`_icon`** (optional) übergibt den Namen des Icon, wenn zusätzlich zum Text des Elements noch ein Icon angezeigt werden soll. Es stehen die <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> zur Verfügung
 - **`_hide-label`** (optional). Wenn der Wert auf **true** gesetzt wird, erscheint im Link ausschließlich das Icon, ohne weiteren Text. Die Eigenschaft `_icon` muss gesetzt werden.
 - **`_label`** übergibt den Text, der für dieses Element angezeigt werden soll.
@@ -81,7 +81,7 @@ Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-
 ## Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _label="https://www.w3.org/TR/wai-aria-practices/#breadcrumb" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/button-group.md CHANGED Viewed

@@ -43,7 +43,7 @@ Im einfachsten Fall besteht die **ButtonGroup**-Komponente aus einer Liste besch
 Über das Attribut **`_icon="xxx"`** wird festgelegt, ob und welches Icon verwendet werden soll.
-Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie <kol-link _href="https://icofont.com/icons" _target="_blank" _label="hier"></kol-link>.
+Eine Übersicht über die zur Verfügung stehenden Icons in KoliBri finden Sie <kol-link _href="https://icofont.com/icons" _label="https://icofont.com/icons" _target="_blank" _label="hier"></kol-link>.
 Über das Attribut **`_hide-label`** legen Sie fest, ob nur das Icon angezeigt werden soll. Der Inhalt des Attributs **`_label`** wird nicht mehr angezeigt.
@@ -82,7 +82,7 @@ Bei Verwendung der **ButtonGroup**-Komponente sind keine besonderen Maßnahmen i
 ## Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _label="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/button.md CHANGED Viewed

@@ -49,11 +49,11 @@ Ein Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objek
 Als String übergeben Sie die Iconklasse (z.B.: `_icon="codicon codicon-home`), das Icon wird links vom Text angezeigt.
 Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
 ### Schaltfläche ohne Text
-Mittels **`_hide-label`** wird die Schaltfläche nur das icon anzeigen (<kol-link _href="#icon" _label="siehe icon"></kol-link>)
+Mittels **`_hide-label`** wird die Schaltfläche nur das icon anzeigen (<kol-link _href="#icon" _label="#icon" _label="siehe icon"></kol-link>)
 <kol-alert _type="info">Beachten Sie, dass das Attribut **`_label`** auch dann gesetzt werden muss, wenn nur ein Icon angezeigt werden soll, dieses wird von Screenreadern vorgelesen und in den Tooltip gesetzt.</kol-alert>
@@ -91,7 +91,7 @@ Probleme mit Disabled-Status
 ## Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#button" _label="https://www.w3.org/TR/wai-aria-practices/#button" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/details.md CHANGED Viewed

@@ -84,7 +84,7 @@ Verwenden Sie das Attribut **`_summary`**, um den Text zu definieren, der als Ü
 ## Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html" _label="https://www.w3.org/TR/UNDERSTANDING-WCAG20/minimize-error-context-help.html" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/icon.md CHANGED Viewed

@@ -2,7 +2,7 @@
 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.
-Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> unterstützt.
+Aktuell werden die Icons von <kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Codicons"></kol-link> unterstützt.
 <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>
@@ -26,7 +26,7 @@ Das Icon (**`_icon`**) kann entweder als String angegeben werden, oder als Objek
 Als String übergeben Sie die Iconklasse (z.B.: `_icon="codicon codicon-home`), das Icon wird links vom Text angezeigt.
 Das Objekt ist vom Typ `KoliBriAllIcon`, kann also einen oder mehrere der Schlüssel `top`, `right`, `bottom` und `left` besitzen. Diese sind dann entweder String (siehe oben) oder ein Objekt vom Typ `KoliBriCustomIcon`, welches aus `icon` (String, siehe oben) und `style` (optional, Styleobjekt) besteht.
-<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
+<kol-link _href="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _label="https://microsoft.github.io/vscode-codicons/dist/codicon.html" _target="_blank" _label="Übersicht Codicons"></kol-link>
 ## Barrierefreiheit
@@ -40,9 +40,9 @@ Mittels der Auszeichnung `aria-label` muss ein Kontext-relevantes Icon beschrift
 ## Links und Referenzen
-- <kol-link _href="https://github.com/microsoft/vscode-codicons" _target="_blank" _label="Codicons"></kol-link>
-- <kol-link _href="https://fontawesome.com" _target="_blank" _label="Font-Awesome"></kol-link>
-- <kol-link _href="https://icofont.com" _target="_blank" _label="Icofont"></kol-link>
+- <kol-link _href="https://github.com/microsoft/vscode-codicons" _label="https://github.com/microsoft/vscode-codicons" _target="_blank" _label="Codicons"></kol-link>
+- <kol-link _href="https://fontawesome.com" _label="https://fontawesome.com" _target="_blank" _label="Font-Awesome"></kol-link>
+- <kol-link _href="https://icofont.com" _label="https://icofont.com" _target="_blank" _label="Icofont"></kol-link>
 <!-- Auto Generated Below -->

package/doc/image.md CHANGED Viewed

@@ -29,15 +29,15 @@ Die Komponente **Image** wird über das HTML-Tag `<kol-image>` erzeugt.
 Mittels **`_srcset`** (und **`_sizes`**) können unterschiedliche Bilder für unterschiedliche Auflösungen und Pixeldichten (des Displays) hinterlegt werden, um auf großen Bildschirmen scharfe Bilder zu liefern und auf kleinen Monitoren nicht unnötig Bandbreite zu verbrauchen.
 Des Weiteren können mittels **`_srcset`** auch verschiedene Dateiformate angegeben werden, um für moderne Browser Bandbreite zu sparen, allerdings ältere Geräte weiterhin zu unterstützen.
 Auch bei Verwendung von **`_srcset`** sollte **`_src`** genutzt werden, da dies von den Browsern als letzte Option verwendet wird, sofern a) **`srcset`** nicht unterstützt wird, oder b) dort kein passendes Bild gefunden wurde.
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _target="_blank" _label="MDN Artikel zu srcset"></kol-link>
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _target="_blank" _label="MDN Artikel zu sizes"></kol-link>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _label="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset" _target="_blank" _label="MDN Artikel zu srcset"></kol-link>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _label="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/sizes" _target="_blank" _label="MDN Artikel zu sizes"></kol-link>
 Für weitere Infos zu **`_srcset`** siehe [Links und Referenzen](#links-und-referenzen)
 ### Ladeverhalten
 Das Attribut **`_loading`** ist optional. Gesetzt werden kann hier entweder `eager` oder `lazy`, sofern ungesetzt wird `lazy` verwendet.
 `eager` sorgt für ein Laden des Bildes direkt beim Betreten der Seite, bei `lazy` lädt der Browser das Bild erst, kurz bevor es sichtbar wird. In der Regel muss `eager` nicht gesetzt werden, setzen Sie es nur sofern Ladeverzögerungen auftreten, oder das Bild sich sicher im, bei Betreten der Seite, sichtbaren Bereich befindet. (z.B.: Logo im Header oder Hero)
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _target="_blank" _label="MDN Artikel zu loading"></kol-link>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _label="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/loading" _target="_blank" _label="MDN Artikel zu loading"></kol-link>
 ## Barrierefreiheit
@@ -48,7 +48,7 @@ Diese Beschreibung wird von Screenreadern vorgelesen und von Browsern angezeigt,
 ## Links und Referenzen
-Ausführliche Erklärung zu `_srcset` und `_sizes`: <kol-link _href="https://www.mediaevent.de/html/srcset.html" _target="_blank"></kol-link>
+Ausführliche Erklärung zu `_srcset` und `_sizes`: <kol-link _href="https://www.mediaevent.de/html/srcset.html" _label="https://www.mediaevent.de/html/srcset.html" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/indented-text.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # IndentedText
-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="kol-quote-Komponente"></kol-link> verwendet werden.).
+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.).
 ## Konstruktion

package/doc/input-checkbox.md CHANGED Viewed

@@ -7,7 +7,9 @@ Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken
 ### Code
 ```html
-<kol-input-checkbox _id="checkbox">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung" _target="document"></kol-link> zu.</kol-input-checkbox>
+<kol-input-checkbox _id="checkbox"
+	>Ich stimme der <kol-link _href="#" _label="#" _label="Datenschutzerklärung" _target="document"></kol-link> zu.</kol-input-checkbox
+>
 <kol-input-checkbox _id="switch" _variant="switch">Geburtsdatum anzeigen?</kol-input-checkbox>
 <kol-input-checkbox _checked _id="button" _variant="button">Schalter aktiviert</kol-input-checkbox>
 <kol-input-checkbox _id="button" _variant="button">Schalter deaktiviert</kol-input-checkbox>
@@ -15,7 +17,7 @@ Der Input-Typ **_Checkbox_** generiert eine rechteckige Box, die durch Anklicken
 ### Beispiel
-<kol-input-checkbox _id="checkbox">Ich stimme der <kol-link _href="#" _label="Datenschutzerklärung" _target="document"></kol-link> zu.</kol-input-checkbox>
+<kol-input-checkbox _id="checkbox">Ich stimme der <kol-link _href="#" _label="#" _label="Datenschutzerklärung" _target="document"></kol-link> zu.</kol-input-checkbox>
 <kol-input-checkbox _id="switch" _variant="switch">Geburtsdatum anzeigen?</kol-input-checkbox>
 <kol-input-checkbox _checked _id="button" _variant="button">Schalter aktiviert</kol-input-checkbox>
 <kol-input-checkbox _id="button" _variant="button">Schalter deaktiviert</kol-input-checkbox>
@@ -38,7 +40,7 @@ Mittels des Attributs **`_variant`** können folgende Varianten ausgewählt werd
 ## Barrierefreiheit
-Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer <kol-link _href="/docs/components/select">Select-Box mit **`_multiple`**</kol-link>.
+Vermeiden Sie die Verwendung von vielen Checkboxen auf einer Seite, da Ihre Inhalte hierdurch schnell unübersichtlich und lang werden. Prüfen Sie in solchen Anwendungsfällen die Verwendung einer <kol-link _href="/docs/components/select" _label="/docs/components/select">Select-Box mit **`_multiple`**</kol-link>.
 Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenreadern vorgelesen wird und so eine eindeutige Identifikation des Eingabefeldes ermöglicht.
@@ -51,8 +53,8 @@ Achten Sie darauf, jeder Checkbox ein Label zuzuweisen, da dieses von Screenread
 ## Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#checkbox" _target="_blank"></kol-link>
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#checkbox" _label="https://www.w3.org/TR/wai-aria-practices/#checkbox" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/input-color.md CHANGED Viewed

@@ -40,7 +40,7 @@ Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgef
 ## Links und Referenzen
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/input-date.md CHANGED Viewed

@@ -46,10 +46,10 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
 ## Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/2012/WD-html-markup-20120329/input.date.html" _target="_blank"></kol-link>
-- <kol-link _href="https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/" _target="_blank"></kol-link>
-- <kol-link _href="https://a11ysupport.io/tech/html/input(type-date)_element" _target="_blank"></kol-link>
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/2012/WD-html-markup-20120329/input.date.html" _label="https://www.w3.org/TR/2012/WD-html-markup-20120329/input.date.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/" _label="https://www.hassellinclusion.com/blog/input-type-date-ready-for-use/" _target="_blank"></kol-link>
+- <kol-link _href="https://a11ysupport.io/tech/html/input(type-date)_element" _label="https://a11ysupport.io/tech/html/input(type-date)_element" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/input-email.md CHANGED Viewed

@@ -37,8 +37,8 @@ Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut **`_error
 ## Links und Referenzen
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
-- <kol-link _href="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _label="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/input-file.md CHANGED Viewed

@@ -19,7 +19,7 @@ Der Input-Typ **File** erzeugt ein Eingabefeld für zum Beispiel Uploads. Es kö
 ## Verwendung
 Geben Sie über das Attribut **`_accept`** an, welche Dateitypen zur Auswahl erlaubt sind. Wird das Attribut nicht oder leer übergeben, sind alle Dateitypen erlaubt.
-Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept" _target="_blank" _label="MDN Artikel zum Attribut accept"></kol-link>.
+Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept" _target="_blank" _label="MDN Artikel zum Attribut accept"></kol-link>.
 ### Best practices
@@ -37,7 +37,7 @@ Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https
 ## Links und Referenzen
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/input-number.md CHANGED Viewed

@@ -29,7 +29,7 @@ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.
 ## Links und Referenzen
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/input-password.md CHANGED Viewed

@@ -34,7 +34,7 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 ## Links und Referenzen
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/input-radio.md CHANGED Viewed

@@ -59,7 +59,7 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und
 ### Best practices
 - Achten sie darauf `id` und `name` korrekt zu setzen, damit die Daten beim Formular Absenden mitgesendet werden.
-- Es wird immer mindestens ein Wert ausgewählt. Ähnlich dem Verhalten einer Select-Auswahl. (<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#selecting_a_radio_button_by_default" _target="_blank"></kol-link>)
+- Es wird immer mindestens ein Wert ausgewählt. Ähnlich dem Verhalten einer Select-Auswahl. (<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#selecting_a_radio_button_by_default" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#selecting_a_radio_button_by_default" _target="_blank"></kol-link>)
 ## Barrierefreiheit
@@ -73,10 +73,10 @@ Dem EventHandler werden zwei Parameter übergeben, das ursprüngliche Event und
 ## Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#radiobutton" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3schools.com/tags/att_input_type_radio.asp" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio" _target="_blank"></kol-link>
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#radiobutton" _label="https://www.w3.org/TR/wai-aria-practices/#radiobutton" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3schools.com/tags/att_input_type_radio.asp" _label="https://www.w3schools.com/tags/att_input_type_radio.asp" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/input-range.md CHANGED Viewed

@@ -40,7 +40,7 @@ Der Input-Typ **Range** erzeugt ein interaktives Element, mit dem Werte durch Ve
 ## Links und Referenzen
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/input-text.md CHANGED Viewed

@@ -49,8 +49,8 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 ## Links und Referenzen
-- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
-- <kol-link _href="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _target="_blank"></kol-link>
+- <kol-link _href="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _label="https://medium.com/@gavyn/til-autofocus-inputs-are-an-accessibility-problem-32ced60c3109" _target="_blank"></kol-link>
+- <kol-link _href="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _label="https://www.jotform.com/blog/html5-datalists-what-you-need-to-know-78024/" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/link-button.md CHANGED Viewed

@@ -1,28 +1,28 @@
 # LinkButton
 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.
-Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/components/button" _label="Seite des Buttons"></kol-link>.
+Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/components/button" _label="/docs/components/button" _label="Seite des Buttons"></kol-link>.
 ## Konstruktion
 ### Code
 ```html
-<kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
-<kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
-<kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
-<kol-link-button _href="#" _label="Secondary" _variant="danger"></kol-link-button>
-<kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Primary" _variant="primary"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Secondary" _variant="secondary"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Normal" _variant="normal"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Secondary" _variant="danger"></kol-link-button>
+<kol-link-button _href="#" _label="#" _label="Ghost" _variant="ghost"></kol-link-button>
 ```
 ### Beispiel
 <div class="flex gap-2">
-  <kol-link-button _href="#" _label="Primary" _variant="primary"></kol-link-button>
-  <kol-link-button _href="#" _label="Secondary" _variant="secondary"></kol-link-button>
-  <kol-link-button _href="#" _label="Normal" _variant="normal"></kol-link-button>
-  <kol-link-button _href="#" _label="Danger" _variant="danger"></kol-link-button>
-  <kol-link-button _href="#" _label="Ghost" _variant="ghost"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Primary" _variant="primary"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Secondary" _variant="secondary"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Normal" _variant="normal"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Danger" _variant="danger"></kol-link-button>
+  <kol-link-button _href="#" _label="#" _label="Ghost" _variant="ghost"></kol-link-button>
 </div>
 <!-- Auto Generated Below -->

package/doc/link.md CHANGED Viewed

@@ -12,7 +12,7 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 ```html
 <p>
 	In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
-	<kol-link _href="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als
+	<kol-link _href="https://www.w3.org" _label="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als
 	<i>
 		<b>inline-Element</b>
 	</i>
@@ -24,7 +24,7 @@ Eingabe von Leerzeichen eingefügt werden. Zusätzliche Leerzeichen vergrößern
 <p>
    In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält.
-  <kol-link _href="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als <i>
+  <kol-link _href="https://www.w3.org" _label="https://www.w3.org" _target="_blank">Hier steht ein Link</kol-link>Er wird standardmäßig als <i>
     <b>inline-Element</b>
     </i> ausgegeben.
 </p>

package/doc/modal.md CHANGED Viewed

@@ -1,10 +1,10 @@
 # Hinweis
-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.
+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" _label="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.
 ## Verwendung von `dialog`-Tag
-Die Dokumentation des `<dialog>` finden Sie <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank" _label="hier(MDN)"></kol-link>.
+Die Dokumentation des `<dialog>` finden Sie <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog" _target="_blank" _label="hier(MDN)"></kol-link>.
 Das **Dialog**-Element kann wie jedes andere HTML-Tag verwendet werden, alle Elemente innerhalb werden wie gewohnt dargestellt.
 Der Dialog ist standardmäßig nicht sichtbar, über das Setzen des Attributs `open`, oder über die Funktionen `show()` und `showModal()` wird er sichtbar.
 `open` und `show()` öffnen das Element mit `position: absolute`, während `showModal()` `position: fixed` setzt.
@@ -99,8 +99,8 @@ Des Weiteren gibt es immer nur maximal ein aktives Modal, welches alle selektier
 ### Links und Referenzen
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _target="_blank"></kol-link>
-- <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _label="https://www.w3.org/TR/wai-aria-practices/#dialog_modal" _target="_blank"></kol-link>
+- <kol-link _href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _label="https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/progress.md CHANGED Viewed

@@ -37,8 +37,8 @@ Verwenden Sie das Attribut **`_value`**, um den aktuellen Wert der Komponente zu
 ## Links und Referenzen
-- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _label="https://developer.mozilla.org/de/docs/Web/HTML/Element/progress" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _label="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/quote.md CHANGED Viewed

@@ -11,11 +11,11 @@ Die `inline`-Variante ist Standard, sofern die Eingerückte gewünscht ist, kann
 ## References
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _target="_blank"></kol-link>
-- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/quote.html" _target="_blank"></kol-link>
-- <kol-link _href="https://www.mediaevent.de/html/cite.html" _target="_blank"></kol-link>
-- <kol-link _href="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/quote" _target="_blank"></kol-link>
+- <kol-link _href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _label="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite" _target="_blank"></kol-link>
+- <kol-link _href="https://www.mediaevent.de/html/quote.html" _label="https://www.mediaevent.de/html/quote.html" _target="_blank"></kol-link>
+- <kol-link _href="https://www.mediaevent.de/html/cite.html" _label="https://www.mediaevent.de/html/cite.html" _target="_blank"></kol-link>
+- <kol-link _href="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _label="https://accessibleweb.com/question-answer/what-is-a-block-quote-and-when-should-i-use-it/" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/select.md CHANGED Viewed

@@ -7,16 +7,16 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 ### Code
 ```html
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}" _value="['1']"> Auswahlfeld </kol-select>
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _value="['1']"> Auswahlfeld </kol-select>
 <kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
 	Auswahlfeld (Mehrfachauswahl)
 </kol-select>
 <kol-select
 	_list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]"
-	_size="4"
+	_rows="4"
 	_value="['1']"
 >
-	Auswahlfeld mit _size
+	Auswahlfeld mit _rows
 </kol-select>
 ```
@@ -26,7 +26,7 @@ Die **Select**-Komponente erzeugt eine Auswahlliste, aus der eine oder mehrere v
 <kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'}]" _multiple _value="['0','2']">
 Auswahlfeld (Mehrfachauswahl)
 </kol-select>
-<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]" _size="4" _value="['1']">Auswahlfeld mit size</kol-select>
+<kol-select _list="[{'label':'Herr','value':'0'},{'label':'Frau','value':'1'},{'label':'Firma','value':'2'},{'label':'Herr','value':'3'},{'label':'Frau','value':'4'},{'label':'Firma','value':'5'}]" _rows="4" _value="['1']">Auswahlfeld mit rows</kol-select>
 ## Verwendung
@@ -44,7 +44,7 @@ Beispiel für die Konstruktion des JSON-Objektes:
 ### Individuelle Höhe angeben
-Über das Attribut **`_size`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
+Über das Attribut **`_rows`** kann von einem Auswahlmenü auf ein Auswahlfeld (wie bei **`_multiple`**) gewechselt werden und dessen Höhe gesetzt werden.
 <!--### Best practices-->
@@ -96,7 +96,7 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 | `_alert`              | `_alert`         | Gibt an, ob der Screenreader die Meldung aktiv vorlesen soll.                                                                                        | `boolean` \| `undefined`                                                                                  | `true`      |
 | `_disabled`           | `_disabled`      | Deaktiviert das interaktive Element in der Komponente und erlaubt keine Interaktion mehr damit.                                                      | `boolean` \| `undefined`                                                                                  | `undefined` |
 | `_error`              | `_error`         | Gibt den Text für eine Fehlermeldung an.                                                                                                             | `string` \| `undefined`                                                                                   | `undefined` |
-| `_height`             | `_height`        | <span class="text-red-500">**[DEPRECATED]**</span> Use _size instead.<br/><br/>Gibt an, ob eine individuelle Höhe übergeben werden soll.                | `string` \| `undefined`                                                                                   | `undefined` |
+| `_height`             | `_height`        | <span class="text-red-500">**[DEPRECATED]**</span> Use _rows instead.<br/><br/>Gibt an, ob eine individuelle Höhe übergeben werden soll.                | `string` \| `undefined`                                                                                   | `undefined` |
 | `_hideLabel`          | `_hide-label`    | Blendet die Beschriftung (Label) aus und zeigt sie stattdessen mittels eines Tooltips an.                                                            | `boolean` \| `undefined`                                                                                  | `undefined` |
 | `_hint`               | `_hint`          | Gibt den Hinweistext an.                                                                                                                             | `string` \| `undefined`                                                                                   | `''`        |
 | `_icon`               | `_icon`          | Setzt die Iconklasse (z.B.: `_icon="codicon codicon-home`).                                                                                          | `string` \| `undefined` \| `{ right?: IconOrIconClass` \| `undefined; left?: IconOrIconClass` \| `undefined; }` | `undefined` |
@@ -107,6 +107,7 @@ import { xxx..., xxx..., FormatHandler, } from '@leanup/form';
 | `_name`               | `_name`          | Gibt den technischen Namen des Eingabefeldes an.                                                                                                     | `string` \| `undefined`                                                                                   | `undefined` |
 | `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                            | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus` \| `undefined`                | `undefined` |
 | `_required`           | `_required`      | Macht das Eingabeelementzu einem Pflichtfeld.                                                                                                        | `boolean` \| `undefined`                                                                                  | `undefined` |
+| `_rows`               | `_rows`          | Defines how many rows of options should be visible at the same time.                                                                                 | `number` \| `undefined`                                                                                   | `undefined` |
 | `_size`               | `_size`          | Wechselt das Eingabeelement in den Auswahlfeld modus und setzt die Höhe des Feldes.                                                                  | `number` \| `undefined`                                                                                   | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Gibt an, welchen Tab-Index das primäre Element in der Komponente hat. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) | `number` \| `undefined`                                                                                   | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align` | Gibt an, ob der Tooltip bevorzugt entweder oben, rechts, unten oder links angezeigt werden soll.                                                     | `"bottom"` \| `"left"` \| `"right"` \| `"top"` \| `undefined`                                                   | `'top'`     |

package/doc/skip-nav.md CHANGED Viewed

@@ -47,7 +47,7 @@ Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Re
 ## Links und Referenzen
-- <kol-link _href="https://webaim.org/techniques/skipnav/" _target="_blank"></kol-link>
+- <kol-link _href="https://webaim.org/techniques/skipnav/" _label="https://webaim.org/techniques/skipnav/" _target="_blank"></kol-link>
 <!-- Auto Generated Below -->

package/doc/spin.md CHANGED Viewed

@@ -79,7 +79,7 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 ```
 <kol-alert _heading="Reduce Motion" _level="4" _type="warning">Wenn möglich sollte stets auf Animationen verzichtet werden. Wenn Animationen genutzt werden, sollte immer darauf geachtet werden, eine Variante mit reduzierter Animationsgeschwindigkeit anzubieten. Mehr Informationen dazu findet sich hier:
-<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _target="_blank"></kol-link></kol-alert>
+<kol-link _href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _label="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion" _target="_blank"></kol-link></kol-alert>
 ### Beispiel
@@ -89,7 +89,7 @@ Ladeanzeigen, wie die **Spin**-Komponente, informieren die Nutzer:innen über La
 <kol-details _summary="CSS Loaders & Spinners" _open>
 Es gibt im Internet viele verschiedene CSS Loaders und Spinners. Beispielsweise bietet _Vineeth_ eine ganze Reihe interessanter CSS Loaders an. Diese können auch in der KoliBri Bibliothek genutzt werden. Dazu muss lediglich der Link zu der entsprechenden CSS Datei in den Head der HTML Datei eingebunden werden. Anschließend kann die gewünschte Animation über den Expert-Slot in die KoliBri-Komponente eingebunden werden. Hier sind einige Beispiele (ohne reduzierte Animationsgeschwindigkeit):
-<kol-link _href="https://github.com/vineethtrv/css-loader" _target="_blank" _target="_blank"></kol-link>
+<kol-link _href="https://github.com/vineethtrv/css-loader" _label="https://github.com/vineethtrv/css-loader" _target="_blank" _target="_blank"></kol-link>
 </kol-details>
 ## Verwendung