@public-ui/sample-react 2.0.7 → 2.0.9

package/src/components/nav/horizontal.tsx

@@ -1,8 +1,17 @@
 import React from 'react';
-
 import { KolNav } from '@public-ui/react';
-
+import { SampleDescription } from '../SampleDescription';
 import { LINKS } from './links';
 
 import type { FC } from 'react';
-export const NavHorizontal: FC = () => <KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />;
+export const NavHorizontal: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				Hier ist ein Beispiel für eine horizontale Navigation. Durch anklicken des rechten + Symbols kann die Navigation erweitert und Untermenüs geöffnet
+				werden.
+			</p>
+		</SampleDescription>
+		<KolNav _label="Main navigation" _links={LINKS} _orientation="horizontal" />
+	</>
+);

package/src/components/pagination/basic.tsx

@@ -3,22 +3,30 @@ import React from 'react';
 import { KolPagination } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const PaginationBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" _on={{}} />
-		<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
-		<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 3" _on={{}} />
-		<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test Paginierung 4" _on={{}} />
-		<KolPagination
-			_max={4}
-			_page={6}
-			_siblingCount={0}
-			_boundaryCount={2}
-			_hasButtons={false}
-			_label="Test Paginierung 4"
-			_on={{}}
-			_pageSizeOptions={[10, 100]}
-		/>
-	</div>
+	<>
+		<SampleDescription>
+			<p>
+				Hier sind fünf Beispiele für eine Paginierung oder Seitennummerierung. Unten Rechts kann zwischen zwei Optionen für die Seitengröße gewechselt werden.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-4">
+			<KolPagination _max={10} _page={6} _siblingCount={0} _label="Test Paginierung 1" _on={{}} />
+			<KolPagination _max={6} _page={6} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 2" _on={{}} />
+			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test Paginierung 3" _on={{}} />
+			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test Paginierung 4" _on={{}} />
+			<KolPagination
+				_max={4}
+				_page={6}
+				_siblingCount={0}
+				_boundaryCount={2}
+				_hasButtons={false}
+				_label="Test Paginierung 4"
+				_on={{}}
+				_pageSizeOptions={[10, 100]}
+			/>
+		</div>
+	</>
 );

package/src/components/progress/basic.tsx

@@ -3,10 +3,16 @@ import React from 'react';
 import { KolProgress } from '@public-ui/react';
 
 import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
 
 export const ProgressBasic: FC = () => (
-	<div className="grid gap-4">
-		<KolProgress _variant="bar" _max={100} _value={33}></KolProgress>
-		<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
-	</div>
+	<>
+		<SampleDescription>
+			<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={33}></KolProgress>
+			<KolProgress _variant="cycle" _max={100} _value={33}></KolProgress>
+		</div>
+	</>
 );

package/src/components/quote/basic.tsx

@@ -2,7 +2,13 @@ import type { FC } from 'react';
 import React from 'react';
 
 import { KolQuote } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
 export const QuoteBasic: FC = () => (
-	<KolQuote _href="https://datatracker.ietf.org/doc/html/rfc1149" _quote="Avian carriers can provide high delay." _variant="inline"></KolQuote>
+	<>
+		<SampleDescription>
+			<p>Hier ist ein Beispiel für ein Zitat.</p>
+		</SampleDescription>
+		<KolQuote _href="https://datatracker.ietf.org/doc/html/rfc1149" _quote="Avian carriers can provide high delay." _variant="inline"></KolQuote>
+	</>
 );

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>
+		</>
 	);
 };