@public-ui/sample-react 2.0.9 → 2.0.11

package/package.json

@@ -1,25 +1,25 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
     "@leanup/stack": "1.3.49",
     "@leanup/stack-react": "1.3.49",
     "@leanup/stack-webpack": "1.3.49",
-    "@public-ui/components": "2.0.9",
-    "@public-ui/react": "2.0.9",
-    "@public-ui/themes": "2.0.9",
-    "@types/node": "20.11.25",
-    "@types/react": "18.2.64",
-    "@types/react-dom": "18.2.21",
-    "@unocss/preset-uno": "0.58.5",
-    "@unocss/webpack": "0.58.5",
+    "@public-ui/components": "2.0.11",
+    "@public-ui/react": "2.0.11",
+    "@public-ui/themes": "2.0.11",
+    "@types/node": "ts5.4",
+    "@types/react": "18.2.73",
+    "@types/react-dom": "18.2.22",
+    "@unocss/preset-uno": "0.58.7",
+    "@unocss/webpack": "0.58.7",
     "ajv": "8.12.0",
-    "chromedriver": "122.0.4",
+    "chromedriver": "122.0.6",
     "cpy-cli": "5.0.0",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-react": "7.34.0",
+    "eslint-plugin-react": "7.34.1",
     "formik": "2.4.5",
     "nightwatch-axe-verbose": "2.3.0",
     "npm-run-all": "4.1.5",
@@ -27,9 +27,9 @@
     "react-dom": "18.2.0",
     "react-router": "6.22.3",
     "react-router-dom": "6.22.3",
-    "rimraf": "3.0.2",
+    "rimraf": "5.0.5",
     "ts-prune": "0.10.3",
-    "typescript": "5.4.2",
+    "typescript": "5.4.3",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0"
   },

package/src/App.tsx

@@ -4,7 +4,7 @@ import { useLocation } from 'react-router';
 import { Navigate, Route, Routes, useSearchParams } from 'react-router-dom';
 
 import PackageJson from '@public-ui/components/package.json';
-import { KolAlert, KolBadge } from '@public-ui/react';
+import { KolBadge } from '@public-ui/react';
 
 import { BackPage } from './components/BackPage';
 import { Sidebar } from './components/Sidebar';
@@ -17,7 +17,8 @@ import { THEMES, THEME_OPTIONS, isDraftTheme } from './shares/theme';
 import type { Route as MyRoute, Routes as MyRoutes } from './shares/types';
 
 import type { Option } from '@public-ui/components';
-import type { Theme } from './shares/theme';
+import type { Theme, ThemeAndUnstyled } from './shares/theme';
+
 setStorage(localStorage);
 
 const getRouteList = (routes: MyRoutes, offset = '/'): string[] => {
@@ -51,7 +52,7 @@ const getRouteTree = (routes: MyRoutes): ReturnType<typeof Route>[] => {
 						element={
 							<div className="d-grid gap-4">
 								{THEME_OPTIONS.filter((theme) => THEMES.indexOf((theme as Option<Theme>).value) >= 0).map((theme) => (
-									<div className="d-grid gap-2" key={(theme as Option<Theme>).value} data-theme={(theme as Option<Theme>).value}>
+									<div className="d-grid gap-2" key={(theme as Option<ThemeAndUnstyled>).value} data-theme={(theme as Option<ThemeAndUnstyled>).value}>
 										<div className="mt-4">
 											<strong>{theme.label}</strong>
 										</div>
@@ -106,10 +107,10 @@ ROUTE_LIST.forEach((route) => {
 export const App: FC = () => {
 	const routerLocation = useLocation();
 	const [searchParams, setSearchParams] = useSearchParams();
-	const theme: Theme = (searchParams.get('theme') as Theme) ?? getTheme();
+	const theme: ThemeAndUnstyled = (searchParams.get('theme') as ThemeAndUnstyled) ?? getTheme();
 	const hideMenus = searchParams.has('hideMenus');
 
-	setTheme(theme as Theme); // set for `getTheme` usages within the application
+	setTheme(theme); // set for `getTheme` usages within the application
 	useSetCurrentLocation();
 
 	document.title = `KoliBri-Handout - ${getThemeName(getTheme())} | v${PackageJson.version}`;

package/src/components/handout/basic.tsx

@@ -6,6 +6,7 @@ import {
 	KolAbbr,
 	KolAccordion,
 	KolAlert,
+	KolBadge,
 	KolBreadcrumb,
 	KolButton,
 	KolButtonLink,
@@ -39,6 +40,7 @@ import {
 import { getTheme, getThemeName } from '../../shares/store';
 
 import type { FC } from 'react';
+import { getRoot } from '../../shares/react-roots';
 const TABLE_HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
@@ -60,15 +62,12 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'montag',
 				label: 'Montag',
-				render: (el, data) => {
-					const button = document.createElement('kol-button');
-					button.setAttribute('_label', data.label);
-					button.setAttribute('data-theme', 'default');
-					button.setAttribute('style', 'font-size: 75%');
-					button.setAttribute('exportparts', 'button,normal');
-					button._on = { onClick: console.log };
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
 					el.innerHTML = '';
-					el.appendChild(button);
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolButton _label={cell.label} style={{ fontSize: '75%' }} data-theme="default" />);
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
@@ -87,8 +86,12 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'dienstag',
 				label: 'Dienstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
@@ -109,33 +112,56 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				render: (el, data) => {
 					el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
 				},
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
+				},
 			},
 			{
 				key: 'donnerstag',
 				label: 'Donnerstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'freitag',
 				label: 'Freitag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'samstag',
 				label: 'Samstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'sonntag',
 				label: 'Sonntag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
 				},
 			},
 		],
@@ -982,7 +1008,12 @@ export const HandoutBasic: FC = () => (
 						<KolInputFile _label={`Datei hochladen`} />
 						<KolInputNumber _label={`Zahleneingabe`} />
 						<KolInputDate _type="date" _label={`Datum`} />
-						<KolInputEmail _icons="{'left': 'codicon codicon-home'}" _error="Test einer Fehlermeldung" _touched _label={`E-Mail-Adresse`} />
+						<KolInputEmail
+							_icons="{'left': 'codicon codicon-home'}"
+							_msg={{ _type: 'error', _description: 'Test einer Fehlermeldung' }}
+							_touched
+							_label={`E-Mail-Adresse`}
+						/>
 						<KolInputText _hint="Ich bin ein Hinweis." _label={`Vorname`} />
 						<KolInputPassword _label={`Passwort`} />
 						<KolSelect _options="[{'label':'Herr','value':0},{'label':'Frau','value':1}]" _label={`Stimmung`} />

package/src/components/input-checkbox/partials/cases.tsx

@@ -52,7 +52,7 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />
 			<KolInputCheckbox
 				{...props}
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_icons={{
 					unchecked: 'codicon codicon-close',
 				}}

package/src/components/input-color/partials/cases.tsx

@@ -10,14 +10,20 @@ export const InputColorCases = forwardRef<HTMLKolInputColorElement, Components.K
 		<div className="grid gap-4">
 			<KolInputColor
 				{...props}
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_icons={{
 					left: 'codicon codicon-symbol-color',
 				}}
 				_label="Color"
 				_value="#f08080"
 			/>
-			<KolInputColor {...props} _error={ERROR_MSG} _label="Color with error" _suggestions="['#000000','#f08080', '#0000ff','#00ff00']" _touched />
+			<KolInputColor
+				{...props}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_label="Color with error"
+				_suggestions="['#000000','#f08080', '#0000ff','#00ff00']"
+				_touched
+			/>
 			<KolInputColor {...props} ref={ref} _accessKey="C" _hint="Hint text" _label="Color with hint" _value="#f08080" />
 			<KolInputColor {...props} _disabled _label="Color (Disabled)" _value="#f08080" />
 		</div>

package/src/components/input-date/partials/cases.tsx

@@ -10,7 +10,15 @@ export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.Kol
 		<div className="grid gap-4">
 			<KolInputDate {...props} _type="date" _label="Datumseingabe" _required />
 			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
-			<KolInputDate {...props} _step={1} _type="datetime-local" _error={ERROR_MSG} _label="Local-Datetime (mit Sekunden)" _required _touched />
+			<KolInputDate
+				{...props}
+				_step={1}
+				_type="datetime-local"
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_label="Local-Datetime (mit Sekunden)"
+				_required
+				_touched
+			/>
 			<KolInputDate {...props} _type="month" _label="Monat" _required />
 			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Woche" _required />
 			<KolInputDate {...props} _type="time" _label="Zeit (Standard)" _required />

package/src/components/input-email/partials/cases.tsx

@@ -8,7 +8,7 @@ import type { Components } from '@public-ui/components';
 export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.KolInputEmail>(function InputEmailCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputEmail {...props} _required _value="test@mail.de" _error={ERROR_MSG} _label="E-Mail" />
+			<KolInputEmail {...props} _required _value="test@mail.de" _msg={{ _type: 'error', _description: ERROR_MSG }} _label="E-Mail" />
 			<KolInputEmail
 				{...props}
 				ref={ref}
@@ -16,7 +16,7 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 				_placeholder="elke@mustermann.de"
 				_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
 				_label="E-Mail (Liste)"
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_icons={{
 					left: {

package/src/components/input-file/partials/cases.tsx

@@ -11,7 +11,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 			<KolInputFile
 				{...props}
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Datei hochladen"
 				_icons={{
 					left: {
@@ -20,7 +20,7 @@ export const InputFileCases = forwardRef<HTMLKolInputFileElement, Components.Kol
 				}}
 				_touched
 			/>
-			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _error={ERROR_MSG} _label="Datei hochladen (Multiple)" />
+			<KolInputFile {...props} ref={ref} _accessKey="h" _multiple _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Datei hochladen (Multiple)" />
 			<KolInputFile {...props} _disabled _label="Datei hochladen (Disabled)" />
 		</div>
 	);

package/src/components/input-number/partials/cases.tsx

@@ -11,7 +11,7 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 			<KolInputNumber
 				{...props}
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_placeholder="Mit Icons"
 				_label="Zahleneingabe"

package/src/components/input-password/partials/cases.tsx

@@ -8,14 +8,14 @@ import type { Components } from '@public-ui/components';
 export const InputPasswordCases = forwardRef<HTMLKolInputPasswordElement, Components.KolInputPassword>(function InputPasswordCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputPassword {...props} _disabled _error={ERROR_MSG} _label="Passwort (Disabled)" _touched />
+			<KolInputPassword {...props} _disabled _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Passwort (Disabled)" _touched />
 			<KolInputPassword {...props} _readOnly _label="Passwort (Readonly)" />
 			<KolInputPassword
 				{...props}
 				ref={ref}
 				_accessKey="P"
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_placeholder="Mit Icons"
 				_label="Passwort"
 				_icons={{

package/src/components/input-radio/objectValue.tsx

@@ -0,0 +1,37 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolForm, KolInputRadio } from '@public-ui/react';
+
+import { SampleDescription } from '../SampleDescription';
+
+export const InputRadioObjectValue: FC = () => {
+	const options = [
+		{ label: 'Field 1', value: { id: 1, name: 'Option 1' } },
+		{ label: 'Field 2', value: { id: 2, name: 'Option 2' } },
+	];
+
+	return (
+		<div className="grid gap-4">
+			<SampleDescription>
+				Examples of implementing the <code>KolInputRadio</code> component with object-based preselected value and undefined value.
+			</SampleDescription>
+			<p>
+				In this example for <code>KolInputRadio</code>, the values of the options are defined as objects.
+			</p>
+			<KolForm>
+				<div className="container my-4 d-grid gap-4">
+					<KolInputRadio _value={options[1].value} _options={options} _label="Test(with object value)" />
+				</div>
+			</KolForm>
+			<p>
+				In this example for <code>KolInputRadio</code>, no value is set.
+			</p>
+			<KolForm>
+				<div className="container my-4 d-grid gap-4">
+					<KolInputRadio _options={options} _label="Test(without value)" />
+				</div>
+			</KolForm>
+		</div>
+	);
+};

package/src/components/input-radio/partials/cases.tsx

@@ -16,7 +16,7 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 			<KolInputRadio
 				{...props}
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_value="Firma"
 				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)','value':'Herr'},{'label':'Firma','value':'Firma'}]"
@@ -37,7 +37,7 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 				_disabled
 				_orientation="horizontal"
 				_required
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_value="Firma"
 				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"

package/src/components/input-radio/routes.ts

@@ -2,11 +2,13 @@ import { Routes } from '../../shares/types';
 import { InputRadioBasic } from './basic';
 import { InputRadioHorizontal } from './horizontal';
 import { InputRadioSelect } from './select';
+import { InputRadioObjectValue } from './objectValue';
 
 export const INPUT_RADIO_ROUTES: Routes = {
 	'input-radio': {
 		basic: InputRadioBasic,
 		horizontal: InputRadioHorizontal,
 		select: InputRadioSelect,
+		object: InputRadioObjectValue,
 	},
 };

package/src/components/input-radio/select.tsx

@@ -19,7 +19,7 @@ export const InputRadioSelect: FC = () => (
 			<p>Hier ist ein Beispiel Radio-Button. Nur eine gleichzeitige Auswahl ist möglich. </p>
 		</SampleDescription>
 		<KolForm className="grid gap-4">
-			<KolInputRadio _error={ERROR_MSG} _options={options} _label="Anrede" />
+			<KolInputRadio _msg={{ _type: 'error', _description: ERROR_MSG }} _options={options} _label="Anrede" />
 		</KolForm>
 	</>
 );

package/src/components/input-range/partials/cases.tsx

@@ -12,7 +12,7 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				{...props}
 				_min={0}
 				_max={50}
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_label="Schieberegler"
 				_icons={{
 					left: {
@@ -24,7 +24,17 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				}}
 				_touched
 			/>
-			<KolInputRange {...props} ref={ref} _accessKey="F" _min={0} _max={50} _step={10} _error={ERROR_MSG} _label="Schieberegler mit Fehler" _touched />
+			<KolInputRange
+				{...props}
+				ref={ref}
+				_accessKey="F"
+				_min={0}
+				_max={50}
+				_step={10}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_label="Schieberegler mit Fehler"
+				_touched
+			/>
 			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Schieberegler (disabled)" />
 		</div>
 	);

package/src/components/input-text/hide-errors.tsx

@@ -9,7 +9,7 @@ export const InputTextHideErrors: FC = () => (
 			This case shows the <code>_hideError</code> feature in the se. You can use the <code>_error</code> prop to show an error message.
 		</SampleDescription>
 		<KolCard _label="Normal input field with error" _level={0}>
-			<KolInputText _error="Error message" _label="Input with error" _touched />
+			<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label="Input with error" _touched />
 		</KolCard>
 		<KolCard _label="Input field with hidden error" _level={0}>
 			<fieldset className="grid md:grid-cols-2 gap-4">
@@ -17,8 +17,8 @@ export const InputTextHideErrors: FC = () => (
 				<KolAlert className="col-span-2" _level={0} _type="error">
 					This is a combined error message
 				</KolAlert>
-				<KolInputText _error="This is a combined error message" _hideError _label="First input" _touched />
-				<KolInputText _error="This is a combined error message" _hideError _label="Second input with error" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="First input" _touched />
+				<KolInputText _msg={{ _type: 'error', _description: 'This is a combined error message' }} _hideError _label="Second input with error" _touched />
 			</fieldset>
 		</KolCard>
 	</div>

package/src/components/input-text/partials/cases.tsx

@@ -11,7 +11,7 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}
-				_error={ERROR_MSG}
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_placeholder="Mit Icons"
 				_icons={{
 					right: {
@@ -34,9 +34,9 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 				_accessKey="V"
 				ref={ref}
 			/>
-			<KolInputText {...props} _placeholder="Placeholder" _label="Suche (search)" _type="search" />
-			<KolInputText {...props} _placeholder="Placeholder" _error={ERROR_MSG} _touched _type="url" _label="URL (url)" />
-			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" />
+			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Nur ein Hinweis' }} _label="Suche (search)" _type="search" />
+			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _type="url" _label="URL (url)" />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'warning', _description: 'Kleine Warnung' }} />
 			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _value="Value" _readOnly _label="Vorname (text, readonly)" />
 			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="Vorname (text, disabled)" />

package/src/components/nav/links.ts

@@ -4,11 +4,16 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
 		_icons: 'codicon codicon-home',
-		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Homepage clicked'),
+		},
 	},
 	{
 		_label: '2 Navigation point',
 		_href: '#/back-page',
+		_on: {
+			onClick: () => console.log('Link clicked'),
+		},
 	},
 	{
 		_label: '3 Navigation point',
@@ -54,7 +59,18 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 			{ _label: '3.5 Navigation point', _href: '#/back-page' },
 		],
 	},
-	{ _label: '4 Navigation point', _href: '#/back-page' },
+	{
+		_label: '4 Navigation point with children and onClick',
+		_children: [
+			{
+				_label: '4.1 Nested link',
+				_href: '#/back-page',
+			},
+		],
+		_on: {
+			onClick: () => console.log('4.1 Nested link clicked'),
+		},
+	},
 	{
 		_label: '5 Keine eigene Seite, nur Kategorie',
 		_active: true,

package/src/components/progress/basic.tsx

@@ -11,7 +11,9 @@ export const ProgressBasic: FC = () => (
 			<p>Hier ist ein Fortschrittsbalken und Fortschrittskreis. Der Fortschritt verändert sich nicht.</p>
 		</SampleDescription>
 		<div className="grid gap-4">
+			<KolProgress _variant="bar" _max={100} _value={0} _label="With label"></KolProgress>
 			<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
+			<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
 			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
 		</div>
 	</>

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

@@ -59,9 +59,17 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				}}
 			/>
 			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Disabled" _disabled />
-			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _error={ERROR_MSG} _touched />
+			<KolSelect {...props} _options={SALUTATION_OPTIONS} _label="Anrede mit Fehler" _msg={{ _type: 'error', _description: ERROR_MSG }} _touched />
 			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl" _multiple />
-			<KolSelect {...props} _options={COUNTRY_OPTIONS} _label="Mehrfachauswahl mit Fehler" _multiple _required _error={ERROR_MSG} _touched />
+			<KolSelect
+				{...props}
+				_options={COUNTRY_OPTIONS}
+				_label="Mehrfachauswahl mit Fehler"
+				_multiple
+				_required
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_touched
+			/>
 		</div>
 	);
 });

package/src/components/spin/custom.tsx

@@ -10,7 +10,10 @@ import type { FC } from 'react';
 export const SpinCustom: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist ein Beispiel für eine Custom Animation.</p>
+			<p>
+				Hier ist ein Beispiel für eine custom Lade-Animation. Mittels des Expert-Slots ist es möglich, eigene Animationen einzufügen. Diese kann nach eigenen
+				Vorstellungen angepasst werden und ist nicht zwingend barrierefrei.
+			</p>
 		</SampleDescription>
 		<KolSpin _show _variant="none">
 			<span slot="expert" className="loader"></span>

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

@@ -5,9 +5,9 @@ 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.',

package/src/components/table/render-cell.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolButton, KolInputText, KolTable } from '@public-ui/react';
+import { createReactRenderElement, KolButton, KolInputText, KolTable } from '@public-ui/react';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -77,13 +77,7 @@ const HEADERS: KoliBriTableHeaders = {
 
 				/* Example 4: Render function using React */
 				render: (el) => {
-					const renderElement = document.createElement('div');
-					renderElement.setAttribute('role', 'presentation');
-					el.innerHTML = '';
-					el.appendChild(renderElement);
-
-					/* https://react.dev/reference/react-dom/client/createRoot */
-					getRoot(renderElement).render(
+					getRoot(createReactRenderElement(el)).render(
 						<div
 							style={{
 								display: `grid`,

package/src/components/textarea/counter.tsx

@@ -9,6 +9,12 @@ export const TextareaCounter: FC = () => (
 		<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 />
+		<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

@@ -11,7 +11,12 @@ export const TextareaDisabled: FC = () => (
 			<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" />
+			<KolTextarea
+				_disabled
+				_msg={{ _type: 'error', _description: 'Es ist ein Fehler aufgetreten' }}
+				_value="Kleiner Text im Eingabefeld ..."
+				_label="Texteingabe"
+			/>
 		</KolForm>
 	</>
 );