@public-ui/sample-react 2.0.8 → 2.0.9

package/src/components/quote/block.tsx

@@ -2,18 +2,27 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolQuote } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBlock: FC = () => (
-	<KolQuote
-		_label="RFC 1149"
-		_href="https://datatracker.ietf.org/doc/html/rfc1149"
-		_quote="Avian carriers can provide high delay, low throughput, and low altitude
+	<>
+		<SampleDescription>
+			<p>
+				Hier ist ein Beispiel für ein Zitat. Es wird eine Quelle durch ein Label angegeben. Durch anklicken des Labels wird man auf die Quellenwebseite
+				weitergeleitet.
+			</p>
+		</SampleDescription>
+		<KolQuote
+			_label="RFC 1149"
+			_href="https://datatracker.ietf.org/doc/html/rfc1149"
+			_quote="Avian carriers can provide high delay, low throughput, and low altitude
 								service. The connection topology is limited to a single point-to-point path
 								for each carrier, used with standard carriers, but many carriers can be used
 								without significant interference with each other, outside early spring.
 								This is because of the 3D ether space available to the carriers, in contrast
 								to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
 								avoidance system, which increases availability."
-		_variant="block"
-	></KolQuote>
+			_variant="block"
+		></KolQuote>
+	</>
 );

package/src/components/select/basic.tsx

@@ -3,5 +3,16 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { SelectVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const SelectBasic: FC = () => <FormWrap RefComponent={SelectVariants} />;
+export const SelectBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier sind Beispiele für verschiedene Auswahlfelder. Es gibt die Varianten Dropdownmenü und Liste mit Scrollbar. Es kann nur ein Element gleichzeitig
+				ausgewählt werden.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={SelectVariants} />
+	</>
+);

package/src/components/spin/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 import { KolSpin } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
-export const SpinBasic: FC = () => <KolSpin _show />;
+export const SpinBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist eine drehende Animation in Deutschlandfarben.</p>
+		</SampleDescription>
+		<KolSpin _show />
+	</>
+);

package/src/components/spin/custom.tsx

@@ -1,4 +1,5 @@
 import './custom.css';
+import { SampleDescription } from '../SampleDescription';
 
 import React from 'react';
 
@@ -7,7 +8,12 @@ import { KolSpin } from '@public-ui/react';
 import type { FC } from 'react';
 
 export const SpinCustom: FC = () => (
-	<KolSpin _show _variant="none">
-		<span slot="expert" className="loader"></span>
-	</KolSpin>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Beispiel für eine Custom Animation.</p>
+		</SampleDescription>
+		<KolSpin _show _variant="none">
+			<span slot="expert" className="loader"></span>
+		</KolSpin>
+	</>
 );

package/src/components/spin/cycle.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 import { KolSpin } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
-export const SpinCycle: FC = () => <KolSpin _show _variant="cycle" />;
+export const SpinCycle: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist eine drehende Animation in verschiedenen Farben.</p>
+		</SampleDescription>
+		<KolSpin _show _variant="cycle" />
+	</>
+);

package/src/components/split-button/basic.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import { ToasterService } from '@public-ui/components';
 import { KolSplitButton } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 const toaster = ToasterService.getInstance(document);
@@ -16,13 +17,21 @@ export const SplitButtonBasic: FC = () => {
 	};
 
 	return (
-		<div className="flex gap-4">
-			<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: handleButtonClick }}>
-				Dropdown-Inhalt
-			</KolSplitButton>
-			<KolSplitButton _label="Schalter ohne sichtbares Label" _hideLabel _icons="codicon codicon-git-pull-request">
-				Dropdown-Inhalt
-			</KolSplitButton>
-		</div>
+		<>
+			<SampleDescription>
+				<p>
+					Hier sind zwei Dropdownmenüs. Das obere Beispiel lässt sich nur durch drücken des Pfeils öffnen. Ansonsten erscheint eine Meldung. Beim unteren
+					Beispiel kann durch drücken auf das Icon und des Pfeils das Menü geöffnet und geschlossen werden.
+				</p>
+			</SampleDescription>
+			<div className="flex gap-4">
+				<KolSplitButton _label="Nur der Pfeil öffnet" _on={{ onClick: handleButtonClick }}>
+					Dropdown-Inhalt
+				</KolSplitButton>
+				<KolSplitButton _label="Schalter ohne sichtbares Label" _hideLabel _icons="codicon codicon-git-pull-request">
+					Dropdown-Inhalt
+				</KolSplitButton>
+			</div>
+		</>
 	);
 };

package/src/components/table/badge-size.tsx

@@ -5,6 +5,7 @@ import { KolBadge, KolTable } from '@public-ui/react';
 
 import { getRoot } from '../../shares/react-roots';
 import { DATA } from './test-data';
+import { SampleDescription } from '../SampleDescription';
 
 import type { KoliBriTableHeaders } from '@public-ui/components';
 import type { Data } from './test-data';
@@ -51,4 +52,14 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableBadgeSize: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />;
+export const TableBadgeSize: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier ist eine Tabelle, die durch anklicken des Knopfes sortiert werden kann. Entweder nach der Reihenfolge, nach dem ältesten Datum oder nach dem
+				jüngsten Datum.
+			</p>
+		</SampleDescription>
+		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block min-w-75em" />
+	</>
+);

package/src/components/table/sort-data.tsx

@@ -2,11 +2,11 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolTable } from '@public-ui/react';
-
-import { DATA } from './test-data';
-
 import type { KoliBriTableHeaders } from '@public-ui/components';
+import { DATA } from './test-data';
 import type { Data } from './test-data';
+import { SampleDescription } from '../SampleDescription';
+
 const DATE_FORMATTER = Intl.DateTimeFormat('de-DE', {
 	day: '2-digit',
 	month: '2-digit',
@@ -33,4 +33,14 @@ const HEADERS: KoliBriTableHeaders = {
 	],
 };
 
-export const TableSortData: FC = () => <KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />;
+export const TableSortData: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier ist eine Tabelle, die durch anklicken des Knopfes sortiert werden kann. Entweder nach der Reihenfolge, nach dem ältesten Datum oder nach dem
+				jüngsten Datum.
+			</p>
+		</SampleDescription>
+		<KolTable _label="Sort a date column" _data={DATA} _headers={HEADERS} className="block" />
+	</>
+);

package/src/components/table/with-pagination.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import { KolTable } from '@public-ui/react';
 
 import { DATE_FORMATTER } from './formatter';
+import { SampleDescription } from '../SampleDescription';
 import { DATA } from './test-data';
 
 import type { KoliBriTableHeaders, KoliBriTablePaginationProps } from '@public-ui/components';
@@ -19,7 +20,15 @@ const HEADERS: KoliBriTableHeaders = {
 const PAGINATION: KoliBriTablePaginationProps = { _page: 2 };
 
 export const TableWithPagination: FC = () => (
-	<div>
-		<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				Durch das Navigieren der Seitenzahlen unten kann die Tabelle umgeblättert werden. Stattdessen kann auch die komplette Tabelle mit Änderung der Einträge
+				pro Seite angezeigt werden.
+			</p>
+		</SampleDescription>
+		<div>
+			<KolTable _label="Tabellenbeschreibung" _data={DATA} _headers={HEADERS} _pagination={PAGINATION}></KolTable>
+		</div>
+	</>
 );

package/src/components/tabs/basic.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
@@ -30,18 +31,23 @@ const tabsWithoutIcons = tabs.map((tab) => ({
 
 export const TabsBasic: FC = () => (
 	<>
-		<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
-			<div slot="tab-0">Inhalte von Tab 1</div>
-			<div slot="tab-1">Inhalte von Tab 2</div>
-			<div slot="tab-2">Inhalte von Tab 3</div>
-			<div slot="tab-3">Inhalte von Tab 4</div>
-		</KolTabs>
+		<SampleDescription>
+			<p>Hier sind verschiedene Varianten von Tabs. Nur der Inhalt eines Tabs wird in jeder Zeile angezeigt.</p>
+		</SampleDescription>
+		<>
+			<KolTabs _tabs={tabsWithoutIcons} _label="Regular tabs">
+				<div slot="tab-0">Inhalte von Tab 1</div>
+				<div slot="tab-1">Inhalte von Tab 2</div>
+				<div slot="tab-2">Inhalte von Tab 3</div>
+				<div slot="tab-3">Inhalte von Tab 4</div>
+			</KolTabs>
 
-		<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with icons">
-			<div slot="tab-0">Inhalte von Tab 1</div>
-			<div slot="tab-1">Inhalte von Tab 2</div>
-			<div slot="tab-2">Inhalte von Tab 3</div>
-			<div slot="tab-3">Inhalte von Tab 4</div>
-		</KolTabs>
+			<KolTabs _tabs={tabs} className="mt-4" _label="Tabs with icons">
+				<div slot="tab-0">Inhalte von Tab 1</div>
+				<div slot="tab-1">Inhalte von Tab 2</div>
+				<div slot="tab-2">Inhalte von Tab 3</div>
+				<div slot="tab-3">Inhalte von Tab 4</div>
+			</KolTabs>
+		</>
 	</>
 );

package/src/components/tabs/icons-only.tsx

@@ -2,6 +2,7 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
@@ -27,10 +28,15 @@ const tabs = [
 	},
 ];
 export const TabsIconsOnly: FC = () => (
-	<KolTabs _tabs={tabs}>
-		<div slot="tab-0">Inhalte von Tab 1</div>
-		<div slot="tab-1">Inhalte von Tab 2</div>
-		<div slot="tab-2">Inhalte von Tab 3</div>
-		<div slot="tab-3">Inhalte von Tab 4</div>
-	</KolTabs>
+	<>
+		<SampleDescription>
+			<p>Hier sind verschiedene Varianten von Tabs mit Icons. Nur der Inhalt eines Tabs wird gleichzeitig angezeigt.</p>
+		</SampleDescription>
+		<KolTabs _tabs={tabs}>
+			<div slot="tab-0">Inhalte von Tab 1</div>
+			<div slot="tab-1">Inhalte von Tab 2</div>
+			<div slot="tab-2">Inhalte von Tab 3</div>
+			<div slot="tab-3">Inhalte von Tab 4</div>
+		</KolTabs>
+	</>
 );

package/src/components/textarea/adjust-height.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 const VALUE = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
 magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
@@ -12,12 +13,17 @@ et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea t
 sit amet.`;
 
 export const TextareaAdjustHeight: FC = () => (
-	<KolForm className="row">
-		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
-		</div>
-		<div className="col-sm-6">
-			<KolTextarea _adjustHeight={true} _resize="none" _value={VALUE} _label="Texteingabe (none)" />
-		</div>
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Hier sind zwei Freitextfelder. Im oberen kann die Größe des Textfelds angepasst werden, im unteren nicht.</p>
+		</SampleDescription>
+		<KolForm className="row">
+			<div className="col-sm-6">
+				<KolTextarea _adjustHeight={true} _resize="vertical" _value={VALUE} _label="Texteingabe (horizontal)" />
+			</div>
+			<div className="col-sm-6">
+				<KolTextarea _adjustHeight={true} _resize="none" _value={VALUE} _label="Texteingabe (none)" />
+			</div>
+		</KolForm>
+	</>
 );

package/src/components/textarea/basic.tsx

@@ -3,5 +3,13 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { TextareaVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const TextareaBasic: FC = () => <FormWrap RefComponent={TextareaVariants} />;
+export const TextareaBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier sind Freitextfelder die mithilfe des Reglers unten Rechts im jeweiligen Feld in ihrer Größe angepasst werden können.</p>
+		</SampleDescription>
+		<FormWrap RefComponent={TextareaVariants} />
+	</>
+);

package/src/components/textarea/counter.tsx

@@ -2,7 +2,13 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolTextarea } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaCounter: FC = () => (
-	<KolTextarea _hasCounter={true} _label="Textara mit Counter und Hint und Fehler" _error={'oh no'} _hint={'Hinweis'} _touched />
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Beispiel für eine Freitextfeld mit Zeichenzähler.</p>
+		</SampleDescription>
+		<KolTextarea _hasCounter={true} _label="Textara mit Counter und Hint und Fehler" _error={'oh no'} _hint={'Hinweis'} _touched />
+	</>
 );

package/src/components/textarea/disabled.tsx

@@ -3,9 +3,15 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaDisabled: FC = () => (
-	<KolForm>
-		<KolTextarea _disabled _error="Es ist ein Fehler aufgetreten." _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Beispiel für ein deaktiviertes Textfeld.</p>
+		</SampleDescription>
+		<KolForm>
+			<KolTextarea _disabled _error="Es ist ein Fehler aufgetreten." _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+		</KolForm>
+	</>
 );

package/src/components/textarea/placeholder.tsx

@@ -3,9 +3,15 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaPlaceholder: FC = () => (
-	<KolForm>
-		<KolTextarea _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Beispiel für ein Freitextfeld mit Platzhaltertext.</p>
+		</SampleDescription>
+		<KolForm>
+			<KolTextarea _placeholder="Hier steht ein Platzhaltertext" _label="Texteingabe" />
+		</KolForm>
+	</>
 );

package/src/components/textarea/readonly.tsx

@@ -3,9 +3,15 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaReadOnly: FC = () => (
-	<KolForm>
-		<KolTextarea _error="Es ist ein Fehler aufgetreten." _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Beispiel für ein Textfeld, in das nicht geschrieben werden kann.</p>
+		</SampleDescription>
+		<KolForm>
+			<KolTextarea _error="Es ist ein Fehler aufgetreten." _readOnly _value="Kleiner Text im Eingabefeld ..." _label="Texteingabe" />
+		</KolForm>
+	</>
 );

package/src/components/textarea/resize.tsx

@@ -3,12 +3,18 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import type { FC } from 'react';
-
+import { SampleDescription } from '../SampleDescription';
+//Umrandung im Reactsample wird nicht angepasst bei Anpassung des Textfelds. Bug?.
 export const TextareaResize: FC = () => (
-	<KolForm className="grid gap-4">
-		<KolTextarea _resize="both" _label="Texteingabe (both)" />
-		<KolTextarea _resize="vertical" _label="Texteingabe (vertical)" />
-		<KolTextarea _resize="horizontal" _label="Texteingabe (horizontal)" />
-		<KolTextarea _resize="none" _label="Texteingabe (none)" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Diese Freitextfelder können in die beschriebenen Richtungen angepasst werden. Die Umrandung ändert sich dabei nicht.</p>
+		</SampleDescription>
+		<KolForm className="grid gap-4">
+			<KolTextarea _resize="both" _label="Texteingabe (both)" />
+			<KolTextarea _resize="vertical" _label="Texteingabe (vertical)" />
+			<KolTextarea _resize="horizontal" _label="Texteingabe (horizontal)" />
+			<KolTextarea _resize="none" _label="Texteingabe (none)" />
+		</KolForm>
+	</>
 );

package/src/components/textarea/rows.tsx

@@ -3,9 +3,15 @@ import React from 'react';
 import { KolForm, KolTextarea } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const TextareaRows: FC = () => (
-	<KolForm>
-		<KolTextarea _rows={10} _label="Texteingabe" />
-	</KolForm>
+	<>
+		<SampleDescription>
+			<p>Hier verstehe ich es nicht. Die Rows sind nicht wie erwartet limitiert.</p>
+		</SampleDescription>
+		<KolForm>
+			<KolTextarea _rows={10} _label="Texteingabe" />
+		</KolForm>
+	</>
 );

package/src/components/toast/basic.tsx

@@ -4,6 +4,7 @@ import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react';
 
 import { getRoot } from '../../shares/react-roots';
+import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
 const toaster = ToasterService.getInstance(document);
@@ -65,16 +66,21 @@ export const ToastBasic: FC = () => {
 	};
 
 	return (
-		<div>
-			<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>{' '}
-			<KolButton _label="Show toast with alert variant 'msg'" _on={{ onClick: handleButtonClickVariantMessage }}></KolButton>{' '}
-			<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
-			<br />
-			<br />
-			<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
-			<br />
-			<br />
-			<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
-		</div>
+		<>
+			<SampleDescription>
+				<p>Hier ist ein Beispiel für verschiedene Toasts, die beim anklicken verschiedene Popups generieren. Der untere schließt alle geöffneten Toasts.</p>
+			</SampleDescription>
+			<div>
+				<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>{' '}
+				<KolButton _label="Show toast with alert variant 'msg'" _on={{ onClick: handleButtonClickVariantMessage }}></KolButton>{' '}
+				<KolButton _label="Show complex toast" _on={{ onClick: handleButtonClickComplex }}></KolButton>
+				<br />
+				<br />
+				<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
+				<br />
+				<br />
+				<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
+			</div>
+		</>
 	);
 };

package/src/components/version/basic.tsx

@@ -3,5 +3,12 @@ import React from 'react';
 import { KolVersion } from '@public-ui/react';
 
 import type { FC } from 'react';
-
-export const VersionBasic: FC = () => <KolVersion _label="1.1.1" />;
+import { SampleDescription } from '../SampleDescription';
+export const VersionBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier ist die Standarddarstellung der Versionsnummer.</p>
+		</SampleDescription>
+		<KolVersion _label="1.1.1" />
+	</>
+);

package/src/components/version/context.tsx

@@ -3,11 +3,17 @@ import React from 'react';
 import { KolVersion } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const VersionContext: FC = () => (
-	<p>
-		<KolVersion _label="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
-		aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
-		ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
-	</p>
+	<>
+		<SampleDescription>
+			<p>Hier ist die Standardversionsnummer mit Text.</p>
+		</SampleDescription>
+		<p>
+			<KolVersion _label="1.0.0" /> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
+			aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+			ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.
+		</p>
+	</>
 );

package/src/react.main.tsx

@@ -2,13 +2,14 @@ import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 
-import { register } from '@public-ui/components';
+import { bootstrap } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 
 import { App } from './App';
 
 import type { Generic } from 'adopted-style-sheets';
+
 type Theme = Generic.Theming.RegisterPatch<string, string, string>;
 
 void (async () => {
@@ -16,17 +17,24 @@ void (async () => {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
 		const { [(process.env.THEME_EXPORT as string) ?? 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
 		try {
-			await register([theme], defineCustomElements);
+			await bootstrap([theme], defineCustomElements, {
+				translation: {
+					name: 'de',
+				},
+			});
 		} catch (error) {
 			console.warn('Theme registration failed:', error);
 		}
 	} else {
 		/* Regular mode: Register all known themes. */
 		try {
-			await register([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
+			await bootstrap([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
 				theme: {
 					detect: 'auto',
 				},
+				translation: {
+					name: 'de',
+				},
 			});
 		} catch (error) {
 			console.warn('Theme registration failed:', error);

package/src/scenarios/complex-form/component.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC } from 'react';
 
 import { KolHeading, KolProgress, KolTable, KolTabs } from '@public-ui/react';
 

package/src/scenarios/complex-form/kopfdaten/component.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC } from 'react';
 
 import { KolAbbr, KolButton, KolInputEmail, KolInputRadio, KolInputText, KolSpin } from '@public-ui/react';
 

package/src/scenarios/complex-form/location/component.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC } from 'react';
 
 import { KolButton, KolSelect, KolSpin } from '@public-ui/react';
 

package/src/scenarios/complex-form/schedule/component.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC } from 'react';
 
 import { KolButton, KolInputDate, KolSpin } from '@public-ui/react';