@public-ui/sample-react 2.0.8 → 2.0.10

package/src/components/details/basic.tsx

@@ -3,23 +3,32 @@ import React from 'react';
 import { KolDetails } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const DetailsBasic: FC = () => (
-	<p className="grid gap-4">
-		<KolDetails _label="Nach Laden der Seite geschlossen">
-			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 invidunt.
-		</KolDetails>
-		<KolDetails _disabled _label="Nach Laden der Seite geöffnet (deaktiviert)" _open>
-			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 invidunt.
-		</KolDetails>
-		<KolDetails _label="Nach Laden der Seite geöffnet" _open>
-			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 invidunt.
-		</KolDetails>
-	</p>
+	<>
+		<SampleDescription>
+			<p>
+				Hier sind zwei Texte und ein deaktivierter Text. Beide aktivierten Texte können durch das klicken auf den &apos;Titel&apos; geöffnet und wieder
+				geschlossen werden. Der untere Text ist nach laden der Seite bereits geöffnet, während der obere Text nach laden der Seite geschlossen ist.{' '}
+			</p>
+		</SampleDescription>
+		<p className="grid gap-4">
+			<KolDetails _label="Nach Laden der Seite geschlossen">
+				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 invidunt.
+			</KolDetails>
+			<KolDetails _disabled _label="Nach Laden der Seite geöffnet (deaktiviert)" _open>
+				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 invidunt.
+			</KolDetails>
+			<KolDetails _label="Nach Laden der Seite geöffnet" _open>
+				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 invidunt.
+			</KolDetails>
+		</p>
+	</>
 );

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>);
 				},
 			},
 		],
@@ -717,8 +743,8 @@ export const HandoutBasic: FC = () => (
 				).
 			</KolDetails>
 		</div>
-		<div className="grid gap-4 grid-cols-12">
-			<KolCard className="col-span-2" _label="Heading" _level={2}>
+		<div className="grid gap-4 sm:grid-cols-6 md:grid-cols-6  xl:grid-cols-12">
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2" _label="Heading" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolHeading _label="Überschrift Stufe 1" _level={1}></KolHeading>
 					<KolHeading _label="Überschrift Stufe 2" _level={2}></KolHeading>
@@ -751,7 +777,7 @@ export const HandoutBasic: FC = () => (
 					</KolAccordion>
 				</div>
 			</KolCard> */}
-			<KolCard className="col-span-2" _label="Abbreviation and Progress" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2" _label="Abbreviation and Progress" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<p>
 						Ich bin eine{' '}
@@ -787,7 +813,7 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-3" _label="Button, LinkButton and Tab" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3" _label="Button, LinkButton and Tab" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolTabs _label="" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>
 						<div className="grid gap-2 py-2">
@@ -847,7 +873,7 @@ export const HandoutBasic: FC = () => (
 					</KolTabs>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-2" _label="Accordion, Link and ButtonLink" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2" _label="Accordion, Link and ButtonLink" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolAccordion _label="Links" _level={3} _open>
 						<div className="grid gap-2" slot="">
@@ -887,7 +913,7 @@ export const HandoutBasic: FC = () => (
 					</KolAccordion>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-3" _label="Alert" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-3" _label="Alert" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolAlert _label="Default message" _type="default">
 						This is the text of the alert.
@@ -904,7 +930,7 @@ export const HandoutBasic: FC = () => (
 					</KolAlert>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-2" _label="Nav and Breadcrumb" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-2 xl:col-span-2" _label="Nav and Breadcrumb" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<div>
 						<KolNav
@@ -975,14 +1001,19 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</div>
 			</KolCard>
-			<KolCard className="col-span-5" _label="Input" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Input" _level={2}>
 				<KolForm slot="">
 					<div className="grid gap-4 grid-cols-3 p-2">
 						<KolInputColor _label={`Farbe`} />
 						<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`} />
@@ -998,7 +1029,7 @@ export const HandoutBasic: FC = () => (
 					</div>
 				</KolForm>
 			</KolCard>
-			<KolCard className="col-span-5" _label="Table with Pagination" _level={2}>
+			<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
 				<div slot="" className="grid gap-2 p-2">
 					<KolTable _label="Tabelle" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
 				</div>

package/src/components/heading/badged.tsx

@@ -3,38 +3,44 @@ import React from 'react';
 import { KolBadge, KolHeading } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const HeadingBadged: FC = () => (
-	<div className="grid gap-4">
-		<KolHeading _label="" _level={1}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={2}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#86ffc6" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={3}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#06539e" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={4}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#ae0000" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={5}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#8b008b" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-		<KolHeading _label="" _level={6}>
-			<span slot="expert">
-				Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
-			</span>
-		</KolHeading>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier werden sechs verschiedene Überschriften mit unterschiedlichen Leveln und Label-Farben dargestellt. Es gibt keine Interaktionsmöglichkeit.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolHeading _label="" _level={1}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={2}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#86ffc6" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={3}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#06539e" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={4}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#ae0000" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={5}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#8b008b" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+			<KolHeading _label="" _level={6}>
+				<span slot="expert">
+					Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
+				</span>
+			</KolHeading>
+		</div>
+	</>
 );

package/src/components/heading/basic.tsx

@@ -3,14 +3,20 @@ import React from 'react';
 import { KolHeading } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const HeadingBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
-		<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
-		<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
-		<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
-		<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
-		<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier sind sechs verschiedene Überschriften mit unterschiedlichen Leveln dargestellt. Es gibt keine Interaktionsmöglichkeit.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
+			<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
+			<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
+			<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
+			<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
+			<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
+		</div>
+	</>
 );

package/src/components/heading/paragraph.tsx

@@ -3,44 +3,53 @@ import React from 'react';
 import { KolHeading } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const HeadingParagraph: FC = () => (
-	<div className="grid gap-4">
-		<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
-		<p>
-			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>
-		<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
-		<p>
-			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>
-		<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
-		<p>
-			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>
-		<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
-		<p>
-			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>
-		<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
-		<p>
-			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>
-		<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
-		<p>
-			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>
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				Hier sind sechs verschiedene Überschriften mit unterschiedlichen Leveln dargestellt. Sie haben jeweils noch ein Beispieltext. Es gibt keine
+				Interaktionsmöglichkeit.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
+			<p>
+				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>
+			<KolHeading _label="Ich bin eine H2-Überschrift" _level={2} />
+			<p>
+				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>
+			<KolHeading _label="Ich bin eine H3-Überschrift" _level={3} />
+			<p>
+				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>
+			<KolHeading _label="Ich bin eine H4-Überschrift" _level={4} />
+			<p>
+				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>
+			<KolHeading _label="Ich bin eine H5-Überschrift" _level={5} />
+			<p>
+				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>
+			<KolHeading _label="Ich bin eine H6-Überschrift" _level={6} />
+			<p>
+				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>
+		</div>
+	</>
 );

package/src/components/icon/basic.tsx

@@ -3,16 +3,22 @@ import React from 'react';
 import { KolIcon } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const IconBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolIcon _label="" _icons="codicon codicon-home" />
-		<KolIcon
-			style={{
-				color: 'red',
-			}}
-			_label=""
-			_icons="codicon codicon-home"
-		/>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier werden zwei verschiedene Icons in unterschiedlichen Farben angezeigt. Es gibt keine Interaktionsmöglichkeit.</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolIcon _label="" _icons="codicon codicon-home" />
+			<KolIcon
+				style={{
+					color: 'red',
+				}}
+				_label=""
+				_icons="codicon codicon-home"
+			/>
+		</div>
+	</>
 );

package/src/components/image/basic.tsx

@@ -1,6 +1,13 @@
 import type { FC } from 'react';
 import React from 'react';
-
+import { SampleDescription } from '../SampleDescription';
 import { KolImage } from '@public-ui/react';
 
-export const ImageBasic: FC = () => <KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />;
+export const ImageBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Hier wird ein Beispielbild angezeigt. Es gibt keine Interaktionsmöglichkeit. </p>
+		</SampleDescription>
+		<KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
+	</>
+);

package/src/components/indented-text/basic.tsx

@@ -3,23 +3,29 @@ import React from 'react';
 import { KolIndentedText } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const IndentedTextBasic: FC = () => (
-	<div className="grid gap-4">
-		<p>
-			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 invidunt.
-		</p>
-		<KolIndentedText>
-			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 invidunt.
-		</KolIndentedText>
-		<p>
-			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 invidunt.
-		</p>
-	</div>
+	<>
+		<SampleDescription>
+			<p>Hier wird ein Indented Text zwischen zwei normalen Texten angezeigt. Es gibt keine Interaktionsmöglichkeit. </p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<p>
+				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 invidunt.
+			</p>
+			<KolIndentedText>
+				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 invidunt.
+			</KolIndentedText>
+			<p>
+				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 invidunt.
+			</p>
+		</div>
+	</>
 );

package/src/components/input-checkbox/basic.tsx

@@ -3,5 +3,17 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputCheckboxBasic: FC = () => <FormWrap RefComponent={InputCheckboxVariants} />;
+export const InputCheckboxBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier werden verschiedene Checkboxen mit betiteltem Wunschausgangsverhalten angezeigt. Die Checkbox &apos;Nicht ausgewählt&apos; ist Standardmäßig nicht
+				ausgewählt usw. Die Buttons unten haben keine direkte Funktion, außer, dass Sie ausgewählt werden können. Der Unterschied zwischen der linken und
+				Rechten Darstellung ist, dass erst nach anklicken im Rechten Teil ein Label angezeigt wird.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputCheckboxVariants} />
+	</>
+);

package/src/components/input-checkbox/button.tsx

@@ -3,5 +3,18 @@ import React from 'react';
 
 import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
+import { SampleDescription } from '../SampleDescription';
 
-export const InputCheckboxButton: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="button" />;
+export const InputCheckboxButton: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier werden verschiedene Checkboxen mit betiteltem Wunschausgangsverhalten angezeigt. Die Checkbox &apos;Nicht ausgewählt&apos; ist Standardmäßig nicht
+				ausgewählt usw. Die Buttons unten haben keine direkte Funktion, außer, dass Sie ausgewählt werden können. Der Unterschied zwischen der linken und
+				Rechten Darstellung ist, dass erst nach anklicken im Rechten Teil ein Label angezeigt wird. In diesem Beispiel sind die Checkboxen als Buttons
+				dargestellt.
+			</p>
+		</SampleDescription>
+		<FormWrap RefComponent={InputCheckboxVariants} _variant="button" />
+	</>
+);

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',
 				}}