Fix and normalize all links in /docs

Author: sdvg

docs/00-welcome.mdx

@@ -7,24 +7,11 @@ tags:
   - Getting started
 ---
 
-import {
-	KolAbbr,
-	KolAlert,
-	KolCard,
-	KolHeading,
-	KolIconIcofont,
-	KolIndentedText,
-	KolIcon,
-	KolKolibri,
-	KolDetails,
-	KolLink,
-	KolLogo,
-	KolTable,
-} from '@public-ui/react';
-import { KoliBri } from '@site/src/components/KoliBri';
-import { KoliBriAbbr } from '@site/src/components/KoliBriAbbr';
-import { WelcomeQualityTable, WelcomeSupportTable } from '@site/src/components/docs/Welcome';
-import { translate } from '@docusaurus/Translate';
+
+import {KolAlert, KolKolibri, KolLink, KolLogo,} from '@public-ui/react';
+import {KoliBri} from '@site/src/components/KoliBri';
+import {KoliBriAbbr} from '@site/src/components/KoliBriAbbr';
+import {WelcomeQualityTable, WelcomeSupportTable} from '@site/src/components/docs/Welcome';
 
 <div className="flex gap-4">
 	<KolLogo
@@ -45,7 +32,7 @@ import { translate } from '@docusaurus/Translate';
 </div>
 
 <KolAlert _type="info" _variant="card">
-	<KolLink _href="/docs/concepts/styling/theming" _label="Erfahren Sie hier, wieso KoliBri so hilfreich ist." />
+	<KolLink _label="Erfahren Sie hier, wieso KoliBri so hilfreich ist." _href="/docs/concepts/styling/theming" />
 </KolAlert>
 
 <br />
@@ -65,17 +52,17 @@ import { translate } from '@docusaurus/Translate';
 ## Mission
 
 <p className="col-12">
-	Der <kol-link _href="https://html.spec.whatwg.org" _target="w3c" _label="HTML-Webstandard"></kol-link> ist an sich sehr
+	Der <KolLink _label="HTML-Webstandard" _href="https://html.spec.whatwg.org" _target="blank" /> ist an sich sehr
 	"offen" spezifiziert, um möglichst langlebig und robust zu sein. Es kommt daher häufig vor, dass HTML-Kompositionen nicht
 	ohne Weiteres barrierefrei, semantisch und valide sind. <KoliBri /> baut direkt auf den
-	<kol-link _href="https://www.w3.org/standards/webdesign/" _target="w3c" _label="Webstandards"></kol-link> des
-	<kol-link _href="https://www.w3.org" _target="w3c" _label="W3C"></kol-link> auf (Framework-agnostisch), ist dabei eine
-	generische Referenzimplementierung des <kol-link
-		_href="https://www.w3.org/WAI/standards-guidelines/wcag/"
-		_target="wcag"
+	<KolLink _label="Webstandards" _href="https://www.w3.org/standards/webdesign/" _target="blank" /> des
+	<KolLink _label="W3C" _href="https://www.w3.org" _target="blank" /> auf (Framework-agnostisch), ist dabei eine
+	generische Referenzimplementierung des <KolLink
 		_label="WCAG-Standards"
+		_href="https://www.w3.org/WAI/standards-guidelines/wcag/"
+		_target="blank"
 	/>
-	und der <kol-link _href="https://www.bitvtest.de/bitv_test.html" _target="bitv" _label="BITV"></kol-link> für die Barrierefreiheit
+	und der <KolLink _label="BITV" _href="https://www.bitvtest.de/bitv_test.html" _target="blank" /> für die Barrierefreiheit
 	und als eine Multi-Theming-fähige Präsentationsschicht umgesetzt. Es gibt keinerlei fachlichen Bezug und keine Datenübertragungsfunktionalitäten.
 	Damit ist <KoliBri /> für die Realisierung statischer Webseiten als auch dynamischer Webanwendungen unterschiedlicher Corporate
 	Designs und Styleguides gleichermaßen wiederverwendbar und somit für Open Source sehr interessant.
@@ -108,7 +95,7 @@ import { translate } from '@docusaurus/Translate';
 		<li>
 			<strong>Zugänglichmachung:</strong> Die Artefakte und der Quellcode können von jedem frei und kostenlos
 			wiederverwendet werden. Hierdurch leistet der ITZBund einen Beitrag im Sinne von{' '}
-			<kol-link _href="https://publiccode.eu/" _target="publiccode" _label="„Public Money – Public Code“"></kol-link>.
+			<KolLink _label="„Public Money – Public Code“" _href="https://publiccode.eu/" _target="blank" />.
 		</li>
 		<li>
 			<strong>Gewährleistungs- und Haftungsausschluss:</strong> Mit der Wiederverwendung gehen keinerlei Gewährleistung
@@ -155,13 +142,13 @@ import { translate } from '@docusaurus/Translate';
 <p className="col-12">
 	Web Components können technologisch sowohl Client-seitig (CSR), prerendered (SSG), als auch Server-seitig (SSR)
 	gerendert werden. Das Rendering ist dabei von den jeweils technischen Rahmenbedingungen abhängig (<KolLink
+		_label="https://web.dev"
 		_href="https://web.dev/rendering-on-the-web/"
-		_target="web.dev"
-		_label={`https://web.dev`}
+		_target="blank"
 	/>, <KolLink
+		_label="https://medium.com"
 		_href="https://medium.com/nerd-for-tech/compare-and-contrast-csr-ssr-and-ssg-in-nextjs-58e3caf2e15e"
-		_target="web.dev"
-		_label={`https://medium.com`}
+		_target="blank"
 	/>).
 </p>
 <p>
@@ -178,7 +165,7 @@ import { translate } from '@docusaurus/Translate';
 	<KolAlert _type="info" _variant="card">
 		<small>
 			🧪 Das Server-Side-Rendering von Web Components ist eine neue spannende Funktionalität, wo noch Anpassungen an den
-			Prerenderer notwendig sein werden und wird daher unsererseits als experimentell eingestuft (<KolLink _href="https://web.dev/declarative-shadow-dom/" _target="web.dev" _label={`https://web.dev`} />).
+			Prerenderer notwendig sein werden und wird daher unsererseits als experimentell eingestuft (<KolLink _label="https://web.dev" _href="https://web.dev/declarative-shadow-dom/" _target="blank" />).
 		</small>
 	</KolAlert>
 </p>
@@ -232,7 +219,7 @@ import { translate } from '@docusaurus/Translate';
 		</li>
 	</ul>
 	Die komplette Beschreibung der SemVer finden Sie hier:{' '}
-	<kol-link _href="https://semver.org/lang/de/" _target="semver" _label="https://semver.org/lang/de/"></kol-link>
+	<KolLink _label="https://semver.org/lang/de/" _href="https://semver.org/lang/de/" _target="blank" />
 </p>
 
 ## Qualitätsziele

docs/03-faq.mdx

@@ -31,7 +31,7 @@ import { KolLink } from '@public-ui/react';
 - **Was besagt die Lizenzierung?**<br/>
   Die EUPL erlaubt die uneingeschränkte Nutzung der Artefakt, die auf konfigurative Weise an die eigenen Bedürfnisse angepasst werden können.
   Andererseits erzwingt sie die Offenlegung von Änderungen, die beim Kopieren von Quellcode aus KoliBri hervorgegangen sind (Copy-Left).
-  Mehr hierzu finden Sie in der <KolLink _href="/docs/project/license" _label="Lizenz" />.
+  Mehr hierzu finden Sie in der <KolLink _label="Lizenz" _href="/docs/project/license" />.
 
 ## Theming und Styling
 
@@ -40,20 +40,20 @@ import { KolLink } from '@public-ui/react';
 - **Wie funktioniert das Theming?**<br/>
   In der Regel werden Web Components mit festem Styling erstellt. KoliBri trennt die semantisch barrierefreien Komponenten vom Styling und stellt dafür eine Register-Methode zum Kombinieren zur Verfügung. Da die Web Components im Browser grundsätzlich registriert (define) werden müssen, besteht hier die Möglichkeit, die Komponenten mit einem definierten Theme zu laden.
 - **Wie kann man ein eigenes Theme erstellen?**<br/>
-  Wir arbeiten stets daran, das Erstellen und Pflegen von Themes weiter zu vereinfachen. Hierzu dienen z.B. das Basis-Styling (reines Layout) der Komponenten ab Version 1.5. Aufsetzen kann man einfach durch die Erstellung einer Theme-Definition, z.B. mit einem eigenen Theme-Projekt (NPM-Paket) mittels der <KolLink _href="https://github.com/public-ui/kolibri/blob/45726c50d7f28c9c595442b2241582816eca5670/packages/create-kolibri/templates/kolibri-library/packages/components/src/global/script.ts#L8" _label="TS-Datei" _target="github"/>. Hilfreich um Erstellen und Pflegen von Themes ist auch unser <KolLink _href="/designer/" _label=" Theme-Designer" _target="designer"/>.
+  Wir arbeiten stets daran, das Erstellen und Pflegen von Themes weiter zu vereinfachen. Hierzu dienen z.B. das Basis-Styling (reines Layout) der Komponenten ab Version 1.5. Aufsetzen kann man einfach durch die Erstellung einer Theme-Definition, z.B. mit einem eigenen Theme-Projekt (NPM-Paket) mittels der <KolLink _label="TS-Datei" _href="https://github.com/public-ui/kolibri/blob/45726c50d7f28c9c595442b2241582816eca5670/packages/create-kolibri/templates/kolibri-library/packages/components/src/global/script.ts#L8" _target="blank" />. Hilfreich um Erstellen und Pflegen von Themes ist auch unser <KolLink _label="Theme-Designer" _href="/designer/" _target="blank" />.
 - **Warum muss CSS in JavaScript verwalten werden?**<br/>
   Das Stylen von KoliBri-Komponenten erfolgt nicht allein eingebundenes CSS oder die Verwendung von CSS-Frameworks (wie z.B. Bootstrap, Material-UI, Tailwind CSS, etc.), sondern
   über das technische Setzen von CSS an der Komponente. Das hat den Vorteil, dass die Komponenten vom äußeren CSS unabhängig sind. Die Robustheit ist ein architektonischen Qualitätsziel. Sie spiegelt sich darin wieder, das nur die Komponente selbst über ihr Styling entscheidet.
 - **Wozu braucht man das Schema?**<br/>
-  KoliBri basiert auf einer ausgeklügelten <KolLink _href="/docs/concepts/architecture" _label="Architektur" />. Beispielsweise dient das kleine Schema-Paket (@public-ui/schema) dazu, die Tag-Namen und Sprach-Keys der KoliBri-Komponenten unabhängig von der konkreten Implementierung zu definieren. Dies ermöglicht bei der Theme-Erstellung ein komplett losgelöstes Arbeiten mit Autovervollständigung, ohne aber die Komponenten und deren Abhängigkeiten zu benötigen. Das hat Vorteile bei manchen Integrationsszenarien, wie z.B. bei statischen Seiten oder Content-Management-Systemen (CMS).
+  KoliBri basiert auf einer ausgeklügelten <KolLink _label="Architektur" _href="/docs/concepts/architecture" />. Beispielsweise dient das kleine Schema-Paket (@public-ui/schema) dazu, die Tag-Namen und Sprach-Keys der KoliBri-Komponenten unabhängig von der konkreten Implementierung zu definieren. Dies ermöglicht bei der Theme-Erstellung ein komplett losgelöstes Arbeiten mit Autovervollständigung, ohne aber die Komponenten und deren Abhängigkeiten zu benötigen. Das hat Vorteile bei manchen Integrationsszenarien, wie z.B. bei statischen Seiten oder Content-Management-Systemen (CMS).
 
 ## Technisches
 
 - **Wieso können KoliBri-Komponenten wirklich barrierefrei sein?**<br/>
   Die KoliBri-Komponenten sind softwarearchitektonisch so designed, dass sie sich nur über Properties instrumentieren lassen und nicht über eignenes reingebbares HTML. Das bedeutet, dass die Komponenten nur über die API (Properties) gesteuert werden können. Das ist ein Qualitätsmerkmal, da die Komponenten so nicht von außen manipuliert werden können. Die Komponenten sind sehr restriktiv und können somit in sich immer barrierefrei sein.<br/>
-  Um aus dieser Restriktivität ausbrechen zu können, gibt es den <KolLink _href="/docs/concepts/expert-slot" _label="Expert-Slot" />, der es ermöglicht, eigenes HTML in die Komponente einzubetten. Die Barrierefreiheit über den Expert-Slot liegt in den Händen des Experten (Developers) und sollte nur in Ausnahmefällen verwendet werden.
+  Um aus dieser Restriktivität ausbrechen zu können, gibt es den <KolLink _label="Expert-Slot" _href="/docs/concepts/expert-slot" />, der es ermöglicht, eigenes HTML in die Komponente einzubetten. Die Barrierefreiheit über den Expert-Slot liegt in den Händen des Experten (Developers) und sollte nur in Ausnahmefällen verwendet werden.
 - **Warum werden die Eigenschaften von Komponenten manchmal abweichend vom HTML-Naming benannt?**<br/>
-  Um die Erlernbarkeit von KoliBri zu einfach zu halten, wird in der Regel immer das Naming des HTML verwenden. Doch auch der HTML-Standard ist in seinem Naming über mehrerer Element (Komponenten) nicht einheitlich. Und daher kommt es dazu, dass wir in KoliBri für gleichartige Eigenschaften übergreifend einheitliche Namen gewählt haben. Mehr dazu finden Sie im Konzept <KolLink _href="/docs/concepts/properties" _label="Eigenschaften" />.
+  Um die Erlernbarkeit von KoliBri zu einfach zu halten, wird in der Regel immer das Naming des HTML verwenden. Doch auch der HTML-Standard ist in seinem Naming über mehrerer Element (Komponenten) nicht einheitlich. Und daher kommt es dazu, dass wir in KoliBri für gleichartige Eigenschaften übergreifend einheitliche Namen gewählt haben. Mehr dazu finden Sie im Konzept <KolLink _label="Eigenschaften" _href="/docs/concepts/properties" />.
 
 ## Barrierefreiheit
 
@@ -62,4 +62,4 @@ import { KolLink } from '@public-ui/react';
 
 ## Noch Fragen offen?
 
-Wenn noch Fragen offen sind, dann schreiben Sie uns gerne eine E-Mail an <KolLink _href="mailto:kolibri@itzbund.de" _label="kolibri@itzbund.de" _target="email" _icons="codicon codicon-mail" />.
+Wenn noch Fragen offen sind, dann schreiben Sie uns gerne eine E-Mail an <KolLink _href="mailto:kolibri@itzbund.de" _label="kolibri@itzbund.de" _icons="codicon codicon-mail" />.

docs/10-get-started/1-first-steps.mdx

@@ -1,21 +1,21 @@
+import { KolAlert, KolLink } from '@public-ui/react';
+
 # Erste Schritte
 
 <div class="grid md:grid-cols-12 mb-4">
-	<kol-alert _label="Cheat Sheet herunterladen" _level="2" _type="info" _variant="card">
-		<kol-link
-			slot=""
-			_href="https://public-ui.github.io/cheat-sheet/"
-			_label="false"
-			_target="cheat-sheet"
+	<KolAlert _label="Cheat Sheet herunterladen" _level="2" _type="info" _variant="card">
+		<KolLink
 			_label="Klicken Sie hier, um sich das Cheat-Sheet zum Entwickeln anzuschauen und herunterzuladen."
-		></kol-link>
-	</kol-alert>
+			_href="https://public-ui.github.io/cheat-sheet/"
+			_target="blank"
+		/>
+	</KolAlert>
 </div>
 
-<kol-alert _type="warning" _variant="card">
+<KolAlert _type="warning" _variant="card">
 	Für Projekt im ITZBund gibt es ein vorgegebenes Seed-Projekt, welches über die internen Kommunikationswege angefragt
 	werden kann.
-</kol-alert>
+</KolAlert>
 
 ## Neues Projekt erstellen
 

docs/10-get-started/5-frameworks.mdx

@@ -8,7 +8,7 @@ import { KolAlert, KolLink, KolTable } from '@public-ui/react';
 
 ## Installation
 
-Alle Pakete/Artefakte von KoliBri werden in der öffentlichen <kol-link _href="https://www.npmjs.com/search?q=%40public-ui" _label="NPM-Registry" _target="npmjs"></kol-link> versioniert bereitgestellt.
+Alle Pakete/Artefakte von KoliBri werden in der öffentlichen <KolLink _label="NPM-Registry" _href="https://www.npmjs.com/search?q=%40public-ui" _target="blank" /> versioniert bereitgestellt.
 
 <KolTable
 	_label="Übersicht der Pakete"

docs/20-concepts/05-styling/34-theming.mdx

@@ -1,19 +1,6 @@
-import {
-	KolAbbr,
-	KolAlert,
-	KolCard,
-	KolHeading,
-	KolIconIcofont,
-	KolIndentedText,
-	KolIcon,
-	KolKolibri,
-	KolDetails,
-	KolLink,
-	KolLogo,
-	KolTable,
-} from '@public-ui/react';
-import { KoliBri } from '@site/src/components/KoliBri';
-import { Mermaid } from '@site/src/components/Mermaid';
+import {KolAlert, KolDetails, KolIndentedText, KolLink,} from '@public-ui/react';
+import {KoliBri} from '@site/src/components/KoliBri';
+import {Mermaid} from '@site/src/components/Mermaid';
 
 # Theming
 
@@ -25,9 +12,9 @@ import { Mermaid } from '@site/src/components/Mermaid';
 	Das Einzigartige an <KoliBri /> ist die <strong>Referenzimplementierung</strong> von Komponenten, die von Grund auf
 	<strong>semantisch W3C- und WCAG-konform</strong> und damit <strong>vollständig barrierefrei</strong> bezüglich der assistiven
 	Unterstützung sind. Alle Komponenten werden dabei als <KolLink
+		_label="Web Components"
 		_href="https://developer.mozilla.org/en-US/docs/Web/Web_Components?retiredLocale=de"
-		_target="mozilla"
-		_label={`Web Components`}
+		_target="blank"
 	/> umgesetzt und sind somit in allen webbasierten Projekten wiederverwendbar. In der folgenden Abbildung werden diese Komponenten
 	durch die grau-gestrichelten Formen in der Mitte dargestellt.
 </p>
@@ -49,26 +36,40 @@ import { Mermaid } from '@site/src/components/Mermaid';
 	Im ersten Release (v1.0) hatte <KoliBri /> noch direkt das Individualisieren des Standard-Designs mittels sogenannter{' '}
 	<strong>
 		<KolLink
+			_label="CSS-Properties"
 			_href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties"
-			_target="mozilla"
-			_label={`CSS-Properties`}
+			_target="blank"
 		/>
 	</strong>{' '}
 	(
-	<KolLink _href="https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71" _target="uxdesign" _label="Design-Tokens"></KolLink>
-	, <KolLink _href="https://tailwindcss.com" _target="tailwindcss" _label={`Tailwind CSS`} />) umgesetzt. Mit der
+	<KolLink
+		_label="Design-Tokens"
+		_href="https://uxdesign.cc/design-tokens-for-dummies-8acebf010d71"
+		_target="blank"
+	/>
+	, <KolLink
+		_label="Tailwind CSS"
+		_href="https://tailwindcss.com"
+		_target="blank"
+	/>) umgesetzt. Mit der
 	Umsetzung weiterer Themes haben wir jedoch festgestellt, dass wir immer mehr CSS-Properties einführen müssten, um die
 	Flexiblität für das gewünschte Design/UX (Corporate Design/Styleguide) umsetzen zu können. Im Zweifel müsste für jede
 	Anpassbarkeit ein separates Property vorgesehen werden. Am Beispiel des{' '}
-	<KolLink _href="https://mui.com/material-ui/api/button/#css" _target="mui" _label={`MUI-Button CSS`} /> ist gut
+	<KolLink
+		_label="MUI-Button CSS"
+		_href="https://mui.com/material-ui/api/button/#css"
+		_target="blank"
+	/> ist gut
 	erkennbar, wie die CSS-Properties (Design Token) immer mehr werden.
 </p>
 <p>
 	<KolIndentedText>
 		<strong>
-			2. Wir haben das ganze CSS vollständig von den Components entkoppelt (wie{' '}
-			<KolLink _href="https://styled-components.com" _target="styled-components" _label={`Styled-Components`} />
-			).
+			2. Wir haben das ganze CSS vollständig von den Components entkoppelt (wie <KolLink
+				_label="Styled-Components"
+				_href="https://styled-components.com"
+				_target="blank"
+			/>).
 		</strong>
 	</KolIndentedText>
 </p>
@@ -131,7 +132,7 @@ stateDiagram-v2
 <p>
 	Das UI/UX-Team spezifiziert beispielsweise mit Figma die Komponenten ihres Design-Systems. Bei der Überführung der
 	Spezifikation in die Realisierung wird das Design in Form von reinem CSS mittels des{' '}
-	<KolLink _href="/docs/concepts/styling/designer" _label={`KoliBri-Designers`} /> auf die Basis-Komponenten
+	<KolLink _label="KoliBri-Designers" _href="/docs/concepts/styling/designer" /> auf die Basis-Komponenten
 	„übertragen“. Wenn im eigenen Design-System eine Individualisierbarkeit gewünscht ist, können im Designer dafür
 	CSS-Properties oder Design-Tokens definiert werden. Damit das eigene Theme über Projekte hinweg geteilt werden kann,
 	wird das Theme in ein NPM-Paket paketiert und kann über eine beliebige Registry bereitgestellt werden.
@@ -157,9 +158,9 @@ stateDiagram-v2
 		KoliBri-Komponenten passen, können in eigenen Komponenten-Bibliotheken aufgebaut und unabhängig gepflegt werden.
 		Hierfür bieten wir die sogenannte <strong>KoliBri-Factory</strong> (Stack) an (siehe{' '}
 		<KolLink
+			_label="Modularisierung"
 			_href="https://github.com/public-ui/kolibri/blob/main/docs/ARCHITECTURE.md#erweitert"
-			_target="github"
-			_label={`Modularisierung`}
+			_target="blank"
 		/>
 		).
 	</p>

docs/20-concepts/05-styling/35-designer.mdx

@@ -1,28 +1,10 @@
-import {
-	KolAbbr,
-	KolAlert,
-	KolCard,
-	KolHeading,
-	KolIconIcofont,
-	KolIndentedText,
-	KolIcon,
-	KolKolibri,
-	KolDetails,
-	KolLink,
-	KolLogo,
-	KolTable,
-} from '@public-ui/react';
+import {KolCard, KolIcon, KolLink,} from '@public-ui/react';
 
 # Designer
 
 <div className="grid grid-cols-2">
 	<KolCard _label="Eigenes Theme erstellen" _level={2}>
-		<KolLink slot="" data-removed-_useCase="nav" _href="/designer" _target="designer" _label="">
-			<div slot="expert" className="flex gap-4 py-2">
-				<KolIcon className="homepage" _icons="codicon codicon-paintcan" />
-				<span>Klicken Sie hier, um den Designer in einem neuen Browser-Fenster zu öffnen.</span>
-			</div>
-		</KolLink>
+		<KolLink _label="Klicken Sie hier, um den Designer in einem neuen Browser-Fenster zu öffnen." _href="/designer" _target="blank" _icons={{ left:'codicon codicon-paintcan' }} />
 	</KolCard>
 </div>
 
@@ -32,8 +14,7 @@ Mithilfe des KoliBri-Designers können Benutzer für die KoliBri-Bibliothek schn
 Die fertigen Styles können anschließend als Theme heruntergeladen und im eigenen Projekt eingefügt werden.
 
 <kol-alert _label="Designer oder Scss" _type="info" _variant="card">
-	KoliBri bietet zum Erstellen von Themes auch einen <kol-link _href="/docs/concepts/styling/scss" _label="Scss" />
-	-Ansatz an. Je nach persönlichen Präferenzen kann der Designer oder Scss verwendet werden.
+	KoliBri bietet zum Erstellen von Themes auch einen <KolLink _label="Scss" _href="/docs/concepts/styling/scss" />-Ansatz an. Je nach persönlichen Präferenzen kann der Designer oder Scss verwendet werden.
 </kol-alert>
 
 ## Globales CSS