Bughunt docs

.prettierignore

@@ -1 +1,3 @@
 **/assets/**
+**/*.md
+**/*.mdx

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
@@ -44,11 +31,8 @@ import { translate } from '@docusaurus/Translate';
 	/>
 </div>
 
-<KolAlert _type="info">
-	<KolLink _href="/docs/concepts/styling/theming" _label="">
-		{' '}
-		Erfahren Sie hier, wieso <KoliBri /> so hilfreich ist.
-	</KolLink>
+<KolAlert _type="info" _variant="card">
+	<KolLink _label="Erfahren Sie hier, wieso KoliBri so hilfreich ist." _href="/docs/concepts/styling/theming" />
 </KolAlert>
 
 <br />
@@ -68,14 +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" _label="WCAG-Standards"></kol-link>
-	und der <kol-link _href="https://www.bitvtest.de/bitv_test.html" _target="bitv" _label="BITV"></kol-link> für die Barrierefreiheit
+	<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 <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.
@@ -104,12 +91,11 @@ import { translate } from '@docusaurus/Translate';
 <p className="col-12">
 	<KoliBri /> wird unter der <strong>EUROPEAN UNION PUBLIC LICENCE v1.2</strong> Open Source freigegeben. Folgende
 	Aspekte sind insbesondere dadurch berücksichtigt:
-	<br />
 	<ul>
 		<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
@@ -145,9 +131,8 @@ import { translate } from '@docusaurus/Translate';
 	werden.
 </p>
 <p className="col-12">
-	<KolAlert _type="success">
-		<KoliBri />
-		-Komponenten lassen sich nahtlos in vorhandene Webseiten oder Webanwendungen integrieren und bringen ihren Style (-guide)
+	<KolAlert _type="success" _variant="card">
+		<KoliBri />-Komponenten lassen sich nahtlos in vorhandene Webseiten oder Webanwendungen integrieren und bringen ihren Style (-guide)
 		selbst mit und kapseln diesen nahezu vollständig von Außen ab.
 	</KolAlert>
 </p>
@@ -156,34 +141,33 @@ 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 _href="https://web.dev/rendering-on-the-web/" _target="web.dev" _label={`https://web.dev`} />,{` `}
-	<KolLink
+	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="_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>
-	<KolIndentedText className="col-12">
+	<KolAlert _type="info" _variant="card">
 		<small>
 			💡 Es ist zu beachten, dass Web Components ein auf JavaScript basierender Webstandard ist. Das
 			Server-Side-Rendering ermöglicht das Prerendern der Web Component für eine optimale Anzeigegeschwindigkeit auf dem
 			Client. Wenn Client-seitiges JavaScript erlaubt ist, steht die vollständige Dynamik der Web Component auch
 			Client-seitig zur Verfügung. Möchte man jedoch Client-seitig kein JavaScript einsetzen, wird die Web Component
 			geprerendert angezeigt, aber die Dynamik geht dadurch verloren.
 		</small>
-	</KolIndentedText>
+	</KolAlert>
 	<br />
-	<KolIndentedText className="col-12">
+	<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>
-	</KolIndentedText>
+	</KolAlert>
 </p>
 
 ## Versionierung
@@ -192,7 +176,7 @@ import { translate } from '@docusaurus/Translate';
 	<KoliBri /> folgt den Prinzipien der semantischen Versionierung.
 </p>
 <p className="col-12">
-	Aufbau einer Version:
+	<strong>Aufbau</strong> einer Version:
 	<ul>
 		<li>
 			Sie besteht in der Regel aus 3 Teilen (z. B. 1.0.2)
@@ -219,7 +203,7 @@ import { translate } from '@docusaurus/Translate';
 	</ul>
 </p>
 <p className="col-12">
-	Folgende Hauptprinzipien kommen dabei zur Anwendung:
+	Folgende <strong>Hauptprinzipien</strong> kommen dabei zur Anwendung:
 	<ul>
 		<li>
 			<b>Patch</b>: Beinhaltet Änderungen, die den aktuellen Funktionsumfang verbessern und in seiner Verwendung nicht
@@ -234,8 +218,8 @@ import { translate } from '@docusaurus/Translate';
 			Funktionsumfang in seiner Verwendung ändern dürfen.
 		</li>
 	</ul>
-	Die komplette Beschreibubng der SemVer finden Sie hier:{' '}
-	<kol-link _href="https://semver.org/lang/de/" _target="semver" _label="https://semver.org/lang/de/"></kol-link>
+	Die komplette Beschreibung der SemVer finden Sie hier:{' '}
+	<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/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"/>.
-- **Warum muss CSS in JavaScript verwalten werden?**<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 _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 verwaltet 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.
+  ü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 architektonisches Qualitätsziel. Sie spiegelt sich darin wider, dass 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 einfach zu halten, wird in der Regel die Benennung aus dem HTML übernommen. Doch auch der HTML-Standard ist in seinem Naming über mehrere Elemente (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,19 +1,21 @@
+import { KolAlert, KolLink } from '@public-ui/react';
+
 # Erste Schritte
 
-<div class="grid md:grid-cols-2 mb-4">
-	<kol-card _label="Cheat Sheet herunterladen" _level="2">
-		<kol-link
-			slot=""
-			_href="https://public-ui.github.io/cheat-sheet/"
-			_icons="codicon codicon-code"
-			_label="false"
-			_target="cheat-sheet"
+<div class="grid md:grid-cols-12 mb-4">
+	<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-card>
+			_href="https://public-ui.github.io/cheat-sheet/"
+			_target="_blank"
+		/>
+	</KolAlert>
 </div>
 
-> **Hinweis:** Für Projekt im ITZBund gibt es ein vorgegebenes Seed-Projekt, welches über die internen Kommunikationswege angefragt werden kann.
+<KolAlert _type="warning" _variant="card">
+	Für Projekt im ITZBund gibt es ein vorgegebenes Seed-Projekt, welches über die internen Kommunikationswege angefragt
+	werden kann.
+</KolAlert>
 
 ## Neues Projekt erstellen
 
@@ -112,7 +114,7 @@ import "./index.css";
 +  .catch(console.warn);
 ```
 
-#### 3. module einbinden
+#### 3. Modul einbinden
 
 index.html
 
@@ -191,7 +193,7 @@ const app = createApp(App)
 app.mount('#app')
 ```
 
-#### 3. module einbinden
+#### 3. Modul einbinden
 
 index.html
 
@@ -311,7 +313,7 @@ export const AppComponent = () => {
 };
 ```
 
-### IV ohne Framework
+### IV Ohne Framework
 
 <kol-tabs _headers="['npm', 'pnpm', 'yarn']" _tabs='[{"_label":"NPM"},{"_label":"PNPM"},{"_label":"YARN"}]'>
 	<div>npm i @public-ui/components @public-ui/themes</div>
@@ -346,7 +348,7 @@ Um Codevervollständigung zu erhalten kann es notwendig sein `.vscode/settings.j
 
 Hierbei ist die Web-Component Schreibweise (kebab-case) zu verwenden. (z.B.: `<kol-heading _label="">`)
 
-### V statische Webseite
+### V Statische Webseite
 
 Um KoliBri in eine statische Webseite einzubauen muss lediglich das folgende Script-Tag eingebunden werden.
 Sofern Schriftarten und/oder Icons verwendet werden, müssen diese, wie oben beschrieben, eingebunden werden.
@@ -364,9 +366,9 @@ Hierbei ist die Web-Component Schreibweise (kebab-case) zu verwenden. (z.B.: `<k
 
 ## Weitere Optionen
 
-### Developer Tools
+### Entwickler Werkzeuge
 
-Mittels der folgenden Konfiguration in der HTML-Datei können die Developer-Tools von KoliBri aktiviert werden.
+Mittels der folgenden Konfiguration in der HTML-Datei können die Entwickler-Werkzeuge von KoliBri aktiviert werden.
 
 ```html
 …