@public-ui/sample-react 2.0.8 → 2.0.10

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

@@ -2,11 +2,12 @@ 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);
 
 export const SplitButtonBasic: FC = () => {
+	const toaster = ToasterService.getInstance(document);
 	const handleButtonClick = () => {
 		void toaster.enqueue({
 			description: 'The Button has been clicked.',
@@ -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,19 @@ 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"
+			_msg={{ _type: 'error', _description: 'oh no' }}
+			_hint={'Hinweis'}
+			_touched
+		/>
+	</>
 );

package/src/components/textarea/disabled.tsx

@@ -3,9 +3,20 @@ 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
+				_msg={{ _type: 'error', _description: 'Es ist ein Fehler aufgetreten' }}
+				_value="Kleiner Text im Eingabefeld ..."
+				_label="Texteingabe"
+			/>
+		</KolForm>
+	</>
 );

package/src/components/textarea/partials/cases.tsx

@@ -8,7 +8,7 @@ import type { Components } from '@public-ui/components';
 export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTextarea>(function TextareaCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolTextarea {...props} _error={ERROR_MSG} _label="Text" _touched />
+			<KolTextarea {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
 		</div>
 	);

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,20 @@ 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
+				_msg={{ _type: 'error', _description: '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,11 +4,12 @@ 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);
 
 export const ToastBasic: FC = () => {
+	const toaster = ToasterService.getInstance(document);
 	const handleButtonClickSimple = () => {
 		void toaster.enqueue({
 			description: 'Toasty',
@@ -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

@@ -1,36 +1,62 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
+import { setTagNameTransformer } from '@public-ui/react';
 
-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 () => {
+const ENABLE_TAG_NAME_TRANSFORMER =
+	process.env.ENABLE_TAG_NAME_TRANSFORMER === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableTagNameTransformer');
+
+const tagNameTransformer = (tagName: string) => `${tagName}-sample`;
+if (ENABLE_TAG_NAME_TRANSFORMER) {
+	setTagNameTransformer(tagNameTransformer);
+}
+
+const getThemes = async () => {
 	if (process.env.THEME_MODULE) {
 		/* 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);
-		} 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, {
-				theme: {
-					detect: 'auto',
+		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
+		return [theme];
+	}
+
+	/* List of regular sample app themes */
+	return [BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund];
+};
+
+void (async () => {
+	try {
+		await bootstrap(
+			await getThemes(),
+			() => {
+				// @see https://github.com/ionic-team/stencil/issues/2847
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+				defineCustomElements(window, {
+					transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
+				} as any);
+			},
+			{
+				theme: process.env.THEME_MODULE
+					? undefined
+					: {
+							detect: 'auto',
+						},
+				translation: {
+					name: 'de',
 				},
-			});
-		} catch (error) {
-			console.warn('Theme registration failed:', error);
-		}
+				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
+			},
+		);
+	} catch (error) {
+		console.warn('Theme registration failed:', error);
 	}
 
 	/**

package/src/scenarios/appointment-form/AvailableAppointmentsForm.tsx

@@ -1,5 +1,5 @@
 import { Field, useFormikContext } from 'formik';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 
 import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
 
@@ -8,19 +8,24 @@ import { fetchAvailableTimes } from './appointmentService';
 import type { FormValues } from './AppointmentForm';
 import type { FieldProps } from 'formik';
 import type { Option } from '@public-ui/components';
-import { createErrorList } from './formUtils';
+import { createErrorList, focusErrorList } from './formUtils';
 
 export function AvailableAppointmentsForm() {
 	const form = useFormikContext<FormValues>();
 
 	const [sectionSubmitted, setSectionSubmitted] = useState(false);
 	const [availableTimes, setAvailableTimes] = useState<Option<string>[] | null>(null);
-
+	const [schouldFocusErrorList, setSchouldFocusErrorList] = useState(true);
 	const errorList = createErrorList(form.errors);
+	const formikRef = useRef(null);
 
 	useEffect(() => {
 		let ignoreResponse = false;
 		setAvailableTimes(null);
+		if (schouldFocusErrorList && sectionSubmitted) {
+			focusErrorList(errorList, formikRef);
+			setSchouldFocusErrorList(false);
+		}
 
 		if (form.values.date) {
 			fetchAvailableTimes().then(
@@ -37,17 +42,19 @@ export function AvailableAppointmentsForm() {
 		return () => {
 			ignoreResponse = true;
 		};
-	}, [form.values.date]);
+	}, [form.values.date, sectionSubmitted]);
 
 	return (
 		<div className="p-2">
 			<KolHeading _level={2} _label="Wählen Sie einen Termin aus"></KolHeading>
 			<KolForm
+				ref={formikRef}
 				_errorList={sectionSubmitted ? errorList : []}
 				_on={{
 					onSubmit: () => {
 						setSectionSubmitted(true);
 						void form.submitForm();
+						focusErrorList(errorList, formikRef);
 					},
 				}}
 			>