@public-ui/sample-react 2.1.4 → 2.1.5-rc.2

package/src/components/details/basic.tsx

@@ -9,22 +9,23 @@ export const DetailsBasic: FC = () => (
 	<>
 		<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.{' '}
+				KolDetails hides its content until opened. The open state can be toggled either by clicking the label or by setting the <code>_open</code>-prop
+				programmatically. The sample includes an initially open state and a disabled but open Details component.
 			</p>
 		</SampleDescription>
+
 		<p className="grid gap-4">
-			<KolDetails _label="Nach Laden der Seite geschlossen">
+			<KolDetails _label="Closed initially">
 				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>
+			<KolDetails _disabled _label="Open initially (disabled)" _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>
+			<KolDetails _label="Open initially" _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.

package/src/components/drawer/basic.tsx

@@ -15,7 +15,7 @@ export const DrawerBasic: FC = () => {
 	const hideMenus = useContext(HideMenusContext);
 	const drawerElement = useRef<HTMLKolDrawerElement>(null);
 	const drawerModalElement = useRef<HTMLKolDrawerElement>(null);
-	const [align, setAlign] = useState<AlignPropType>(defaultAlign);
+	const [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');
 	useEffect(() => {
 		if (defaultAlign) {
 			drawerModalElement.current?.open();
@@ -26,11 +26,11 @@ export const DrawerBasic: FC = () => {
 			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 			<SampleDescription>
 				<p>
-					Hier ist ein Beispiel für ein Drawer. Dieser lässt sich öffnen und schließen mit Methoden. Dadurch erscheint ein Dialog mit Text und
-					&apos;Schließen&apos; Button. Durch anklicken des &apos;Schließen&apos; Button, schließt sich der Dialog wieder. Zusätzlich lässt sich der Dialog als
-					Modal (_modal) durch ESC schließen. Beide Varianten können über das Attribut _align links, oben, rechts oder unten ausgerichtet werden.
+					KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments and the modal- and
+					non-modal modes.
 				</p>
 			</SampleDescription>
+
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
 			<div className="flex flex-wrap gap-4">
 				<KolDrawer ref={drawerElement} _label="Ich bin ein Drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>

package/src/components/drawer/controlled.tsx

@@ -21,20 +21,20 @@ export const DrawerControlled: FC = () => {
 			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 			<SampleDescription>
 				<p>
-					Hier ist ein Beispiel für einen kontrollierten Drawer. Dieser lässt sich öffnen und schließen über das Attribut _open. Zusätzlich lässt sich der
-					Dialog als Modal (_modal) durch ESC schließen. Der Drawer kann über das Attribut _align links, oben, rechts oder unten ausgerichtet werden.
+					This sample shows the KolDrawer controlled by the property <code>_open</code> instead of methods.
 				</p>
 			</SampleDescription>
+
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
 			<div className="flex flex-wrap gap-4">
-				<KolDrawer _open={open} _align={align} _label="Ich bin ein kotrollierter Drawer" _on={{ onClose: () => setOpen(false) }}>
+				<KolDrawer _open={open} _align={align} _label="I'm a controlled drawer" _on={{ onClose: () => setOpen(false) }}>
 					<div>
 						<p>Lorem ipsum dolor sit amet,</p>
 						<KolButton _label="Close drawer" _on={{ onClick: () => setOpen(false) }} />
 					</div>
 				</KolDrawer>
 				<KolButton _label="Open drawer" _on={{ onClick: () => setOpen(true) }} />
-				<KolDrawer _open={modalOpen} _modal _align={align} _label="Ich bin ein kotrollierter Modal Drawer" _on={{ onClose: () => setModalOpen(false) }}>
+				<KolDrawer _open={modalOpen} _modal _align={align} _label="I'm a controlled modal drawer" _on={{ onClose: () => setModalOpen(false) }}>
 					<div>
 						<p>Lorem ipsum dolor sit amet,</p>
 						<KolButton _label="Close drawer" _on={{ onClick: () => setModalOpen(false) }} />

package/src/components/form/basic.tsx

@@ -6,13 +6,14 @@ import { KolForm, KolInputText } from '@public-ui/react';
 export const FormBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Dieses Beispiel zeigt ein Formular mit drei Eingabefeldern.</p>
+			<p>KolForm renders a form around the input components provided in a slot. This sample shows a basic form with three input fields.</p>
 		</SampleDescription>
+
 		<KolForm>
 			<div className="grid gap-2">
-				<KolInputText id="input1" _label="Eingabe 1" />
-				<KolInputText id="input2" _label="Eingabe 2" />
-				<KolInputText id="input3" _label="Eingabe 3" />
+				<KolInputText id="input1" _label="Input 1" />
+				<KolInputText id="input2" _label="Input 2" />
+				<KolInputText id="input3" _label="Input 3" />
 			</div>
 		</KolForm>
 	</>

package/src/components/form/error-list.tsx

@@ -6,20 +6,21 @@ import { KolForm, KolInputText } from '@public-ui/react';
 export const FormErrorList: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Dieses Beispiel zeigt ein Formular mit drei Eingabefeldern. Das zweite Eingabefeld enthält einen Fehler. </p>
+			<p>This sample shows a form with error messages.</p>
 		</SampleDescription>
+
 		<KolForm
 			_errorList={[
 				{
-					message: 'Fehler in Eingabe 2',
+					message: 'Error in Input 2',
 					selector: '#input2',
 				},
 			]}
 		>
 			<div className="grid gap-2">
-				<KolInputText id="input1" _label="Eingabe 1" />
-				<KolInputText id="input2" _label="Eingabe 2" _touched _msg={{ _description: 'Fehlerhafte Eingabe', _type: 'error' }} />
-				<KolInputText id="input3" _label="Eingabe 3" />
+				<KolInputText id="input1" _label="Input 1" />
+				<KolInputText id="input2" _label="Input 2" _touched _msg={{ _description: 'Input error', _type: 'error' }} />
+				<KolInputText id="input3" _label="Input 3" />
 			</div>
 		</KolForm>
 	</>

package/src/components/heading/badged.tsx

@@ -8,8 +8,11 @@ import { SampleDescription } from '../SampleDescription';
 export const HeadingBadged: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier werden sechs verschiedene Überschriften mit unterschiedlichen Leveln und Label-Farben dargestellt. Es gibt keine Interaktionsmöglichkeit.</p>
+			<p>
+				This sample shows KolHeading with its different levels and content provided using the export slot instead of the <code>_label</code>-property.
+			</p>
 		</SampleDescription>
+
 		<div className="grid gap-4">
 			<KolHeading _label="" _level={1}>
 				<span slot="expert">

package/src/components/heading/basic.tsx

@@ -8,15 +8,16 @@ import { SampleDescription } from '../SampleDescription';
 export const HeadingBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind sechs verschiedene Überschriften mit unterschiedlichen Leveln dargestellt. Es gibt keine Interaktionsmöglichkeit.</p>
+			<p>KolHeading renders a heading with the given level.</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} />
+			<KolHeading _label="I'm a H1-heading" _level={1} />
+			<KolHeading _label="I'm a H2-heading" _level={2} />
+			<KolHeading _label="I'm a H3-heading" _level={3} />
+			<KolHeading _label="I'm a H4-heading" _level={4} />
+			<KolHeading _label="I'm a H5-heading" _level={5} />
+			<KolHeading _label="I'm a H6-heading" _level={6} />
 		</div>
 	</>
 );

package/src/components/heading/paragraph.tsx

@@ -8,11 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const HeadingParagraph: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Hier sind sechs verschiedene Überschriften mit unterschiedlichen Leveln dargestellt. Sie haben jeweils noch ein Beispieltext. Es gibt keine
-				Interaktionsmöglichkeit.
-			</p>
+			<p>This sample shows KolHeading with its different levels combined with some text content each.</p>
 		</SampleDescription>
+
 		<div className="grid gap-4">
 			<KolHeading _label="Ich bin eine H1-Überschrift" _level={1} />
 			<p>

package/src/components/heading/routes.ts

@@ -5,8 +5,8 @@ import { HeadingParagraph } from './paragraph';
 
 export const HEADING_ROUTES: Routes = {
 	heading: {
-		badge: HeadingBadged,
 		basic: HeadingBasic,
+		badge: HeadingBadged,
 		paragraph: HeadingParagraph,
 	},
 };

package/src/components/icon/basic.tsx

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const IconBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier werden zwei verschiedene Icons in unterschiedlichen Farben angezeigt. Es gibt keine Interaktionsmöglichkeit.</p>
+			<p>KolIcon renders an icon. This sample shows one regular icon and one with a custom style-property, changing the icon color.</p>
 		</SampleDescription>
+
 		<div className="grid gap-4">
 			<KolIcon _label="" _icons="codicon codicon-home" />
 			<KolIcon

package/src/components/image/basic.tsx

@@ -6,8 +6,9 @@ import { KolImage } from '@public-ui/react';
 export const ImageBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier wird ein Beispielbild angezeigt. Es gibt keine Interaktionsmöglichkeit. </p>
+			<p>KolImage renders an image. The sample shows an image with alternative text.</p>
 		</SampleDescription>
+
 		<KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
 	</>
 );

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

@@ -8,8 +8,11 @@ import { SampleDescription } from '../SampleDescription';
 export const IndentedTextBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier wird ein Indented Text zwischen zwei normalen Texten angezeigt. Es gibt keine Interaktionsmöglichkeit. </p>
+			<p>
+				KolIndentedText renders the given slot content, styled as indented text. The sample shows two regular paragraphs with an indented paragraph in between.
+			</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

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

@@ -8,12 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 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>
+			<p>KolInputCheckbox renders a checkbox. The sample shows KolInputCheckbox in a form context with all variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputCheckboxVariants} />
 	</>
 );

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

@@ -9,13 +9,9 @@ import { InputCheckboxVariants } from './partials/variants';
 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>
+			<p>This sample shows KolInputCheckbox in the variant &quot;button&quot;.</p>
 		</SampleDescription>
+
 		<FormWrap<Components.KolInputCheckbox> RefComponent={InputCheckboxVariants} _variant="button" />
 	</>
 );

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

@@ -7,14 +7,9 @@ import { FormWrap } from '../FormWrap';
 export const InputCheckboxSwitch: 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 Switches
-				dargestellt.
-			</p>
+			<p>This sample shows KolInputCheckbox in the variant &quot;switch&quot;.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />
 	</>
 );

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

@@ -8,11 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const InputColorBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Hier sind verschiedene Formular-Felder mit Farben angezeigt. Links mit Label, Rechts nur nach anklicken mit Label. Die Farben können verändert werden.
-				Die Buttons unten haben keine direkte Funktion. Sie können angeklickt werden.{' '}
-			</p>
+			<p>KolInputColor renders a color input. The sample shows KolInputColor in a form context with all variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputColorVariants} />
 	</>
 );

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

@@ -8,13 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const InputDateBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Hier sieht man ein Formularfeld mit verschiedenen Zeiteingaben. Bei Datumseingabe kann ein Datum in einem Kalender ausgewählt werden, aber auch
-				eingetippt werden. Es gibt ein gleiches Verhalten im nächsten Feld. Die Felder Monat und Woche sind Freitextfelder. Im Feld Zeit können nur Werte von 0
-				bis 23 und 0 bis 59 angegeben werden. Mit den Feldern Zahleneingabe gibt es keine Interaktionsmöglichekeit. Ein gleiches Verhalten gibt es im Rechten
-				Feld, hier werden die Label erst nach anklicken angezeigt.{' '}
-			</p>
+			<p>KolInputDate renders all types of fields for date and time input. The sample shows KolInputDate in a form context with all variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputDateVariants} />
 	</>
 );

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

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const InputEmailBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier verstehe ich es nicht. (Fehlermeldung bei Standard.) </p>
+			<p>KolInputEmail renders an email input field. The sample shows KolInputEmail in a form context with all variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputEmailVariants} />
 	</>
 );

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

@@ -8,11 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const InputFileBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>
-				Hier können einzelne oder mehrere Files ausgewählt werden. Bei &apos;Datei hochladen&apos; wird der Name der ausgewählten Datei angezeigt. Bei
-				&apos;Datei hochladen (Multiple)&apos; werden die Anzahl der ausgewählten Dateien angezeigt.
-			</p>
+			<p>KolInputFile renders a file input field. The sample shows KolInputFile in a form context with all variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputFileVariants} />
 	</>
 );

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

@@ -9,10 +9,9 @@ export const InputNumberBasic: FC = () => (
 	<>
 		<SampleDescription>
 			<p>
-				The <code>{'kol-input-number'}</code>-component encompasses basic functionalities, utilizing the min, max, and step attributes to restrict the range of
-				input values. Despite these constraints, it allows free input that can ignore the defined minimum and maximum values, as well as step sizes. The
-				component intentionally does not emphasize validation rules, supporting examples without form validation, and refrains from additional validation
-				through native HTML element validation.
+				KolInputNumber encompasses basic functionalities, utilizing the min, max, and step attributes to restrict the range of input values. Despite these
+				constraints, it allows free input that can ignore the defined minimum and maximum values, as well as step sizes. The component intentionally does not
+				emphasize validation rules, supporting examples without form validation, and refrains from additional validation through native HTML element validation.
 			</p>
 		</SampleDescription>
 		<FormWrap RefComponent={InputNumberVariants} />

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

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const InputPasswordBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind Passwort Eingabefelder dargestellt. Im Feld &apos;Passwort P&apos; eingegebene Zeichen werden verdeckt angezeigt.</p>
+			<p>KolInputPassword renders a password input field. The sample shows KolInputPassword in a form context with all variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputPasswordVariants} />
 	</>
 );

package/src/components/input-password/show-password.tsx

@@ -11,10 +11,11 @@ export const InputPasswordShowPassword: FC = () => {
 		<>
 			<SampleDescription>
 				<p>
-					Hier wird ein Passwort Eingabefeld angezeigt. Durch klicken auf den im Feld Rechts stehenden Button, kann zwischen verdecktem und angezeigtem Passwort
-					gewechselt werden.
+					This sample shows KolInputPassword in the variant &quot;visibility-toggle&quot;. It features a button to toggle between a visible and hidden password
+					input.
 				</p>
 			</SampleDescription>
+
 			<KolForm>
 				<KolInputPassword _placeholder="Mit 'Passwort anzeigen' Button" _label="Passwort" ref={passwordRef} className="block" _variant="visibility-toggle" />
 				<KolInputPassword

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

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const InputRadioBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind Radio-Buttons in verschiedenen Ausführungen angezeigt. Es kann immer nur einer der drei Radio-Buttons gleichzeitig angeklickt werden.</p>
+			<p>KolInputRadio renders a set of radio buttons. The sample shows KolInputRadio in a form context with all variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputRadioVariants} />
 	</>
 );

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

@@ -27,10 +27,10 @@ export const InputRadioHorizontal: FC = () => {
 		<div className="grid gap-4">
 			<SampleDescription>
 				<p>
-					This sample simulates the <code>horizontal</code> and <code>vertical</code> orientation of the <code>kol-input-radio</code>, if we rerender the
-					component.
+					This sample shows the <code>horizontal</code> and <code>vertical</code> orientation of KolInoutRadio. It also features a button to test re-rendering.
 				</p>
 			</SampleDescription>
+
 			<div className="flex gap-4">
 				<KolButton _label="Click me a few times" _on={{ onClick: showClick }} />
 				<KolInputCheckbox _label="Switch orientation (horizontal/vertical)" _on={{ onChange: toggleOrientation }} _variant="switch" />

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

@@ -14,22 +14,22 @@ export const InputRadioObjectValue: FC = () => {
 	return (
 		<div className="grid gap-4">
 			<SampleDescription>
-				Examples of implementing the <code>KolInputRadio</code> component with object-based preselected value and undefined value.
+				This sample shows KolInputRadio with <code>object</code> and <code>undefined</code> values.
 			</SampleDescription>
-			<p>
-				In this example for <code>KolInputRadio</code>, the values of the options are defined as objects.
-			</p>
+
 			<KolForm>
+				<p>
+					In this example for <code>KolInputRadio</code>, the values of the options are defined as objects.
+				</p>
 				<div className="container my-4 d-grid gap-4">
-					<KolInputRadio _value={options[1].value} _options={options} _label="Test(with object value)" />
+					<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>
+
+				<p>
+					In this example for <code>KolInputRadio</code>, no value is set.
+				</p>
 				<div className="container my-4 d-grid gap-4">
-					<KolInputRadio _options={options} _label="Test(without value)" />
+					<KolInputRadio _options={options} _label="Test (without value)" />
 				</div>
 			</KolForm>
 		</div>

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

@@ -1,14 +1,12 @@
 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-range/basic.tsx

@@ -8,8 +8,12 @@ import { SampleDescription } from '../SampleDescription';
 export const InputRangeBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist ein Schieberegler mit Schalter am Rand. Der Wert kann von 0 bis 50 verändert werden.</p>
+			<p>
+				KolInputRange renders a pair of range- and number fields wich are synchronized with each other. The sample shows KolInputRange in a form context with
+				all variations and states.
+			</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputRangeVariants} />
 	</>
 );

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

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const InputTextBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind verschiedene Freitexteingabefelder.</p>
+			<p>KolInputText renders a text input field. The sample shows KolInputText in a form context with all variations and states.</p>
 		</SampleDescription>
+
 		<FormWrap RefComponent={InputTextVariants} />
 	</>
 );

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

@@ -6,12 +6,16 @@ import { SampleDescription } from '../SampleDescription';
 export const InputTextHideErrors: FC = () => (
 	<div className="grid gap-4">
 		<SampleDescription>
-			This case shows the <code>_hideError</code> feature in the se. You can use the <code>_error</code> prop to show an error message.
+			<p>
+				This sample shows the <code>_hideError</code> feature for KolInputText. It allows to hide the error message from an input field and can be used, when
+				the error is already shown somewhere else, e.g. for a group of inputs.
+			</p>
 		</SampleDescription>
+
 		<KolCard _label="Normal input field with error" _level={0}>
 			<KolInputText _msg={{ _type: 'error', _description: 'Error message' }} _label="Input with error" _touched />
 		</KolCard>
-		<KolCard _label="Input field with hidden error" _level={0}>
+		<KolCard _label="Input fields with hidden error" _level={0}>
 			<fieldset className="grid md:grid-cols-2 gap-4">
 				<legend>Combined input field</legend>
 				<KolAlert className="col-span-2" _level={0} _type="error">

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

@@ -1,12 +1,10 @@
 import { Routes } from '../../shares/types';
 import { InputTextBasic } from './basic';
-import { InputTextBlur } from './blur';
 import { InputTextHideErrors } from './hide-errors';
 
 export const INPUT_TEXT_ROUTES: Routes = {
 	'input-text': {
 		basic: InputTextBasic,
-		blur: InputTextBlur,
 		'hide-errors': InputTextHideErrors,
 	},
 };

package/src/components/kolibri/basic.tsx

@@ -8,14 +8,14 @@ import { SampleDescription } from '../SampleDescription';
 export const KolibriBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Das KoliBri-Logo in verschiedenen Varianten</p>
+			<p>KolKolibri renders the KoliBri logo. The sample show the logo with and without label and with a custom color.</p>
 		</SampleDescription>
 
 		<KolHeading class="block" _level={3} _label="Regular" />
 		<KolKolibri class="block" style={{ width: 300 }} />
-		<KolHeading class="block" _level={3} _label="Ohne Label" />
+		<KolHeading class="block" _level={3} _label="Without Label" />
 		<KolKolibri class="block" style={{ width: 300 }} _labeled={false} />
-		<KolHeading class="block" _level={3} _label="Individuelle Farbe" />
+		<KolHeading class="block" _level={3} _label="Customized color" />
 		<KolKolibri class="block" style={{ width: 300 }} _color="#cc006e" />
 	</>
 );

package/src/components/link/basic.tsx

@@ -7,8 +7,11 @@ import { SampleDescription } from '../SampleDescription';
 export const LinkBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind Beispiele für verschiedene Links.</p>
+			<p>
+				KolLink renders a link. This sample shows disabled links, links with hidden label and links with different CSS <code>display</code>-properties.
+			</p>
 		</SampleDescription>
+
 		<div className="grid gap-4">
 			<KolLink _href="#/back-page" _label="Simple Link" />
 			<KolLink _disabled _href="#/back-page" _label="Simple Link (deaktiviert)" />

package/src/components/link/icons.tsx

@@ -8,8 +8,9 @@ import { SampleDescription } from '../SampleDescription';
 export const LinkIcons: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier sind verschiedene Darstellungsweisen von Links mit Icons.</p>
+			<p>This sample shows KolLink with icons in different alignments and combinations.</p>
 		</SampleDescription>
+
 		<div className="grid gap-4">
 			<KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" _href="#/back-page" />
 			<KolLink

package/src/components/link/image.tsx

@@ -1,23 +1,18 @@
+import type { FC } from 'react';
 import React from 'react';
 
-import { KolKolibri, KolLink } from '@public-ui/react';
-
-import type { FC } from 'react';
+import { KolLink } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const LinkImage: FC = () => (
 	<>
 		<SampleDescription>
-			<p>Hier ist ein Link, der als Text gerendert wird und zwei Darstellungen des KoliBri-Theming.</p>
+			<p>KolLink can be used with slot-content instead of a label as well. This sample demonstrates the slot content used to display an image.</p>
 		</SampleDescription>
+
 		<div className="grid gap-4">
 			<KolLink _href="#/back-page" _label="Ich bin ein Link, der als Text gerendert wird" />
 			<br />
-			<KolLink _href="#/back-page" _label="">
-				<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
-				<KolKolibri style={{ width: '300px' }}></KolKolibri>
-			</KolLink>
-			<br />
 			<KolLink _href="#/back-page" _label="">
 				<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
 			</KolLink>