@public-ui/sample-react 2.1.7-rc.1 → 2.1.7

package/src/components/heading/badged.tsx

@@ -16,32 +16,32 @@ export const HeadingBadged: FC = () => (
 		<div className="grid gap-4">
 			<KolHeading _label="" _level={1}>
 				<span slot="expert">
-					Eine Überschrift mit einem <KolBadge _label="Label"></KolBadge>
+					A heading with a <KolBadge _label="Label"></KolBadge>
 				</span>
 			</KolHeading>
 			<KolHeading _label="" _level={2}>
 				<span slot="expert">
-					Eine Überschrift mit einem <KolBadge _color="#86ffc6" _label="Label"></KolBadge>
+					A heading with a <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>
+					A heading with a <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>
+					A heading with a <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>
+					A heading with a <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>
+					A heading with a <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
 				</span>
 			</KolHeading>
 		</div>

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

@@ -8,20 +8,20 @@ import type { Components } from '@public-ui/components';
 export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Components.KolInputCheckbox>(function InputCheckboxCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputCheckbox {...props} _label="Nicht ausgewählt" _value={false} _required />
-			<KolInputCheckbox {...props} _label="Unbestimmt (Indeterminate)" _value={null} _indeterminate />
-			<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Ausgewählt" _tooltipAlign="right" _value={true} />
+			<KolInputCheckbox {...props} _label="Not selected" _value={false} _required />
+			<KolInputCheckbox {...props} _label="Indeterminate" _value={null} _indeterminate />
+			<KolInputCheckbox {...props} ref={ref} _accessKey="A" _checked _label="Selected" _tooltipAlign="right" _value={true} />
 			<KolInputCheckbox
 				{...props}
 				_checked
 				_icons={{ unchecked: 'codicon codicon-close' }}
-				_label={'Mit sehr langem Label und Umbrüchen '.repeat(5)}
+				_label={'With a very long label and upheavals '.repeat(5)}
 				_value={true}
 			/>
 			<KolInputCheckbox {...props} _disabled _label="Disabled" _value={true} _hint="Hint text" />
 			<KolInputCheckbox {...props} _checked _disabled _label="Checked and disabled" />
 			<KolInputCheckbox {...props} _indeterminate _disabled _label="Indeterminate and disabled" />
-			<KolInputCheckbox {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Mit Fehler" _touched _value={true} _hint="Hint text" />
+			<KolInputCheckbox {...props} _msg={{ _type: 'error', _description: ERROR_MSG }} _label="With error" _touched _value={true} _hint="Hint text" />
 		</div>
 	);
 });

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

@@ -8,23 +8,23 @@ import type { Components } from '@public-ui/components';
 export const InputDateCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props, ref) {
 	return (
 		<div className="grid gap-4">
-			<KolInputDate {...props} _type="date" _label="Datumseingabe" _required />
+			<KolInputDate {...props} _type="date" _label="Date input" _required />
 			<KolInputDate {...props} _type="datetime-local" _label="Local-Datetime (Standard)" _required />
 			<KolInputDate
 				{...props}
 				_step={1}
 				_type="datetime-local"
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Local-Datetime (mit Sekunden)"
+				_label="Local datetime (with seconds)"
 				_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 />
-			<KolInputDate {...props} _step={1} _type="time" _label="Zeit (mit Sekunden)" _required />
-			<KolInputDate {...props} _readOnly _label="Datumseingabe (Readonly)" _required />
-			<KolInputDate {...props} _disabled _label="Datumseingabe (Disabled)" _required />
+			<KolInputDate {...props} _type="month" _label="Month" _required />
+			<KolInputDate {...props} ref={ref} _accessKey="W" _type="week" _label="Week" _required />
+			<KolInputDate {...props} _type="time" _label="Time (standard)" _required />
+			<KolInputDate {...props} _step={1} _type="time" _label="Time (with seconds)" _required />
+			<KolInputDate {...props} _readOnly _label="Date input (read-only)" _required />
+			<KolInputDate {...props} _disabled _label="Date input (Disabled)" _required />
 		</div>
 	);
 });

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

@@ -0,0 +1,21 @@
+import React, { useRef } from 'react';
+import { KolButton, KolInputDate } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+export const InputDateReset = () => {
+	const dateRef = useRef<HTMLKolInputDateElement>(null);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates the KolInputDate <code>reset</code>-Method, which can be used to clear the field, even when it holds incomplete or invalid
+					values.
+				</p>
+			</SampleDescription>
+
+			<KolInputDate ref={dateRef} _label="Resettable Input Date" _value="2024-02-10" />
+			<KolButton className="mt" _label={'Reset'} _on={{ onClick: () => dateRef.current?.reset() }} />
+		</>
+	);
+};

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

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { InputDateBasic } from './basic';
+import { InputDateReset } from './reset';
 
 export const INPUT_DATE_ROUTES: Routes = {
 	'input-date': {
 		basic: InputDateBasic,
+		reset: InputDateReset,
 	},
 };

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

@@ -15,7 +15,7 @@ export const InputEmailCases = forwardRef<HTMLKolInputEmailElement, Components.K
 				_accessKey="M"
 				_placeholder="elke@mustermann.de"
 				_suggestions="['test1@mail.de', 'test2@mail.de', 'test3@mail.de']"
-				_label="E-Mail (Liste)"
+				_label="E-Mail (list)"
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_icons={{

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

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

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

@@ -14,7 +14,7 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
 				_placeholder="Mit Icons"
-				_label="Zahleneingabe"
+				_label="Number input"
 				_icons={{
 					left: {
 						icon: 'codicon codicon-arrow-left',
@@ -24,13 +24,13 @@ export const InputNumberCases = forwardRef<HTMLKolInputNumberElement, Components
 					},
 				}}
 			/>
-			<KolInputNumber {...props} _required _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
-			<KolInputNumber {...props} _required _msg={{ _type: 'warning', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
-			<KolInputNumber {...props} _required _msg={{ _type: 'info', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
-			<KolInputNumber {...props} _required _msg={{ _type: 'success', _description: ERROR_MSG }} _touched _value={123} _label="Zahleneingabe" />
-			<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Zahleneingabe (-10 bis 10 in 2er Schritten)" />
-			<KolInputNumber {...props} _readOnly _label="Zahleneingabe (Readonly)" />
-			<KolInputNumber {...props} _disabled _label="Zahleneingabe (Disabled)" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'error', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'warning', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'info', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
+			<KolInputNumber {...props} _required _msg={{ _type: 'success', _description: ERROR_MSG }} _touched _value={123} _label="Number input" />
+			<KolInputNumber {...props} ref={ref} _accessKey="Z" _max={10} _min={-10} _step={2} _label="Number input (-10 to 10 in steps of 2)" />
+			<KolInputNumber {...props} _readOnly _label="Number input (Readonly)" />
+			<KolInputNumber {...props} _disabled _label="Number input (Disabled)" />
 		</div>
 	);
 });

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

@@ -17,10 +17,10 @@ export const InputPasswordShowPassword: FC = () => {
 			</SampleDescription>
 
 			<KolForm>
-				<KolInputPassword _placeholder="Mit 'Passwort anzeigen' Button" _label="Passwort" ref={passwordRef} className="block" _variant="visibility-toggle" />
+				<KolInputPassword _placeholder="With 'Show password' button" _label="Password" ref={passwordRef} className="block" _variant="visibility-toggle" />
 				<KolInputPassword
-					_placeholder="Mit 'Passwort anzeigen' Button und disabled"
-					_label="Passwort"
+					_placeholder="With 'Show password' button and disabled"
+					_label="Password"
 					ref={passwordRef}
 					className="block"
 					_disabled

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

@@ -2,7 +2,7 @@ import React, { forwardRef } from 'react';
 
 import { KolInputRadio } from '@public-ui/react';
 
-import { ERROR_MSG } from '../../../shares/constants';
+import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 
 import type { Components } from '@public-ui/components';
 export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.KolInputRadio>(function InputRadioCases(props, ref) {
@@ -10,17 +10,17 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 		<div className="grid gap-4">
 			<KolInputRadio
 				{...props}
-				_options="[{'disabled':true,'label':'Frau (disabled)','value':'Frau'},{'label':'Herr'},{'label':'Firma','value':'Firma'}]"
-				_label="Anrede"
+				_options="[{'disabled':true,'label':'Mrs. (disabled)','value':'Mrs.'},{'label':'Mr.'},{'label':'Company','value':'Company'}]"
+				_label="Salutation"
 			/>
 			<KolInputRadio
 				{...props}
 				_required
 				_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'}]"
-				_label="Anrede (mit Fehler)"
+				_value="Company"
+				_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+				_label="Salutation (with error)"
 			/>
 			<KolInputRadio
 				{...props}
@@ -28,9 +28,9 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 				_accessKey="A"
 				_orientation="horizontal"
 				_required
-				_value="Firma"
-				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
-				_label="Anrede (horizontal)"
+				_value="Company"
+				_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)'},{'label':'Company','value':'Company'}]"
+				_label="Salutation (horizontal)"
 			/>
 			<KolInputRadio
 				{...props}
@@ -39,18 +39,33 @@ export const InputRadioCases = forwardRef<HTMLKolInputRadioElement, Components.K
 				_required
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
 				_touched
-				_value="Firma"
-				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
-				_label="Anrede (horizontal mit Fehler)"
+				_value="Company"
+				_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)'},{'label':'Company','value':'Company'}]"
+				_label="Salutation (horizontal with error)"
 			/>
 			<KolInputRadio
 				{...props}
 				_disabled
-				_value="Firma"
-				_options="[{'label':'Frau','value':'Frau'},{'disabled':true,'label':'Herr (disabled)'},{'label':'Firma','value':'Firma'}]"
-				_label="Anrede"
+				_value="Company"
+				_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)'},{'label':'Company','value':'Company'}]"
+				_label="Salutation"
 				_touched
 			/>
+			<KolInputRadio
+				{...props}
+				_orientation="horizontal"
+				_required
+				_msg={{ _type: 'error', _description: ERROR_MSG }}
+				_touched
+				_value="Company"
+				_options={[
+					{ label: 'Mrs.', value: 'Mrs.', hint: 'Description for option "Mrs."' },
+					{ label: 'Mr. (disabled)', value: 'Mr.', hint: 'Description for option "Mr."', disabled: true },
+					{ label: 'Company', value: 'Company', hint: 'Description for option "Company"' },
+				]}
+				_label="Salutation (horizontal with error hint and description)"
+				_hint={HINT_MSG}
+			/>
 		</div>
 	);
 });

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

@@ -13,7 +13,7 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				_min={0}
 				_max={50}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Schieberegler"
+				_label="Slider"
 				_icons={{
 					left: {
 						icon: 'codicon codicon-arrow-left',
@@ -32,10 +32,10 @@ export const InputRangeCases = forwardRef<HTMLKolInputRangeElement, Components.K
 				_max={50}
 				_step={10}
 				_msg={{ _type: 'error', _description: ERROR_MSG }}
-				_label="Schieberegler mit Fehler"
+				_label="Slider with error"
 				_touched
 			/>
-			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Schieberegler (disabled)" />
+			<KolInputRange {...props} _disabled _min={0} _max={50} _label="Slider (disabled)" />
 		</div>
 	);
 });

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

@@ -11,8 +11,8 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 			<KolInputText
 				{...props}
 				_hint={HINT_MSG}
-				_msg={{ _type: 'error', _description: ERROR_MSG, _label: 'test überschrift' }}
-				_placeholder="Mit Icons"
+				_msg={{ _type: 'error', _description: ERROR_MSG, _label: 'test headline' }}
+				_placeholder="With icons"
 				_icons={{
 					right: {
 						icon: 'codicon codicon-arrow-right',
@@ -30,19 +30,19 @@ export const InputTextCases = forwardRef<HTMLKolInputTextElement, Components.Kol
 				_required
 				_type="search"
 				_touched
-				_label="Vorname (text)"
+				_label="First name (text)"
 				_accessKey="V"
 				ref={ref}
 			/>
-			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Nur ein Hinweis' }} _label="Suche (search)" _type="search" />
+			<KolInputText {...props} _placeholder="Placeholder" _msg={{ _type: 'info', _description: 'Just a hint' }} _label="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" _type="tel" _label="Telefon (tel)" _msg={{ _type: 'success', _description: 'Erfolgsmeldung' }} />
-			<KolInputText {...props} _placeholder="Placeholder" _label="Mit Counter" _hasCounter _maxLength={10} />
-			<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)" />
-			<KolInputText {...props} _value="Value" _disabled _label="Vorname (text, disabled)" />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'warning', _description: 'Small warning' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _type="tel" _label="Telephone (tel)" _msg={{ _type: 'success', _description: 'Success message' }} />
+			<KolInputText {...props} _placeholder="Placeholder" _label="With counter" _hasCounter _maxLength={10} />
+			<KolInputText {...props} _placeholder="Placeholder" _readOnly _label="First name (text, readonly)" />
+			<KolInputText {...props} _value="Value" _readOnly _label="First name (text, readonly)" />
+			<KolInputText {...props} _placeholder="Placeholder" _disabled _label="First name (text, disabled)" />
+			<KolInputText {...props} _value="Value" _disabled _label="First name (text, disabled)" />
 		</div>
 	);
 });

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

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

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

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Formik, Field, type FieldProps } from 'formik';
+import { KolForm, KolHeading, KolInputText } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+const NON_ALPHANUM = /[^a-zA-Z0-9]/g;
+const EVERY_FOUR_CHARS = /(.{4})(?!$)/g;
+
+class IbanFormatter {
+	private electronicFormat(iban: string): string {
+		return iban.replace(NON_ALPHANUM, '').toUpperCase();
+	}
+
+	private printFormat(iban: string, separator?: string) {
+		return this.electronicFormat(iban).replace(EVERY_FOUR_CHARS, '$1' + (separator || ' '));
+	}
+
+	public parse(value: string): string {
+		return this.electronicFormat(value);
+	}
+	public format(value: string): string {
+		return this.printFormat(value);
+	}
+}
+
+type FormValues = {
+	iban: string;
+};
+
+export function InputTextFormatterDemo() {
+	const handleSubmit = async () => {};
+	const formatter = new IbanFormatter();
+	const initialValues: FormValues = {
+		iban: 'DE89370400440532013000',
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This example demonstrates formatting a data value in an input field (example IBAN). The data value is formatted to the input field (print format) and
+					vice versa the formatting is removed again (machine format)
+				</p>
+			</SampleDescription>
+			<Formik<FormValues> initialValues={initialValues} onSubmit={handleSubmit}>
+				{(form) => (
+					<>
+						<div className="p-2">
+							<KolHeading _label="Formatted Form Field" _level={2} />
+							<KolForm>
+								<Field name="iban">
+									{({ field }: FieldProps<FormValues['iban']>) => (
+										<div className="block mt-2">
+											<KolInputText
+												onBlur={() => {
+													void form.setFieldTouched('iban', true);
+												}}
+												id="field-iban"
+												_label="IBAN"
+												_value={formatter.format(field.value ?? '')}
+												_msg={{
+													_type: 'error',
+													_description: form.errors.iban || '',
+												}}
+												_touched={form.touched.iban}
+												_required
+												_on={{
+													onInput: (event, value: unknown) => {
+														if (event.target) {
+															const parsed_value = formatter.parse((value as string) ?? '');
+
+															void form.setFieldValue('iban', parsed_value, true);
+														}
+													},
+												}}
+											/>
+										</div>
+									)}
+								</Field>
+							</KolForm>
+						</div>
+						<div className="p-2">
+							<KolHeading _label="Model" _level={2} />
+							<pre>{JSON.stringify(form.values, null, 2)}</pre>
+						</div>
+					</>
+				)}
+			</Formik>
+		</>
+	);
+}

package/src/components/link/aria-description.tsx

@@ -0,0 +1,17 @@
+import { KolLink } from '@public-ui/react';
+import React from 'react';
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const LinkAriaDescription: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolLink with aria-description</p>
+		</SampleDescription>
+
+		<div className="flex flex-wrap gap-4">
+			<KolLink _href="#/back-page" _label="Link Text without aria description"></KolLink>
+			<KolLink _href="#/back-page" _label="Link Text" _ariaDescription="Link Area Description"></KolLink>
+		</div>
+	</>
+);

package/src/components/link/basic.tsx

@@ -18,17 +18,18 @@ export const LinkBasic: FC = () => (
 			<KolLink _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link" />
 			<KolLink _disabled _hideLabel _icons="codicon codicon-home" _href="#/back-page" _label="Icon Link (deaktiviert)" />
 			<p>
-				In diesem Absatz wird ein Link gesetzt, der keine weiteren Attribute enthält. <KolLink _href="#/back-page" _label="Simple Link" /> Er wird standardmäßig
-				als <strong>inline-Element</strong> ausgegeben.
+				In this paragraph, a link is inserted that contains no additional attributes.
+				<KolLink _href="#/back-page" _label="Simple Link" />
+				It is rendered by default as a <strong>inline element</strong>.
 			</p>
 			<p>
-				In diesem Absatz wird ein Link gesetzt, der einmal als inline-block-Element ausgegeben wird.{' '}
-				<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. Damit kann man mir per CSS-Styles eine Breite, eine Höhe und
-				andere Eigenschaften zuweisen.
+				In this paragraph, a link is inserted that is rendered as an inline-block element.
+				<KolLink class="d-inline-block" _accessKey="S" _href="#/back-page" _label="Simple Link" />. This allows you to assign width, height, and other
+				properties to it using CSS styles.
 				<br />
 				<br />
-				Danach folgt ein Link, der als block-Element ausgegeben wird. <KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, daher gehe ich über
-				die ganze Breite des Eltern-Elements erzeuge so einen Zeilenumbruch.
+				After that, there is a link that is rendered as a block element.
+				<KolLink class="d-block" _href="#/back-page" _label="Simple Link" />, therefore, I span the entire width of the parent element, causing a line break.
 			</p>
 		</div>
 	</>

package/src/components/link/icons.tsx

@@ -12,26 +12,26 @@ export const LinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" _href="#/back-page" />
+			<KolLink _icons="codicon codicon-home" _label="I am a link with an icon on the left" _href="#/back-page" />
 			<KolLink
 				_icons={{
 					right: 'codicon codicon-home',
 				}}
-				_label="Ich bin ein Link mit Icon rechts"
+				_label="I am a link with an icon on the right"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
 					top: 'codicon codicon-home',
 				}}
-				_label="Ich bin ein Link mit Icon oben"
+				_label="I am a link with an icon at the top"
 				_href="#/back-page"
 			/>
 			<KolLink
 				_icons={{
 					bottom: 'codicon codicon-home',
 				}}
-				_label="Ich bin ein Link mit Icon unten"
+				_label="I am a link with icon below"
 				_href="#/back-page"
 			/>
 			<KolLink
@@ -41,7 +41,7 @@ export const LinkIcons: FC = () => (
 					bottom: 'codicon codicon-home',
 					left: 'codicon codicon-home',
 				}}
-				_label="Ich bin ein Link mit allen Icons"
+				_label="I am a link with all icons"
 				_href="#/back-page"
 			/>
 		</div>

package/src/components/link/image.tsx

@@ -11,10 +11,10 @@ export const LinkImage: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolLink _href="#/back-page" _label="Ich bin ein Link, der als Text gerendert wird" />
+			<KolLink _href="#/back-page" _label="I am a link that is rendered as text" />
 			<br />
 			<KolLink _href="#/back-page" _label="">
-				<img alt="Darstellung des KoliBri-Theming" slot="expert" src="abgrenzung.jpg" width="300" />
+				<img alt="Presentation of the KoliBri theming" slot="expert" src="abgrenzung.jpg" width="300" />
 			</KolLink>
 		</div>
 	</>

package/src/components/link/routes.ts

@@ -3,6 +3,7 @@ import { LinkBasic } from './basic';
 import { LinkIcons } from './icons';
 import { LinkImage } from './image';
 import { LinkTarget } from './target';
+import { LinkAriaDescription } from './aria-description';
 
 export const LINK_ROUTES: Routes = {
 	link: {
@@ -10,5 +11,6 @@ export const LINK_ROUTES: Routes = {
 		icons: LinkIcons,
 		image: LinkImage,
 		target: LinkTarget,
+		'aria-description': LinkAriaDescription,
 	},
 };

package/src/components/link-button/aria-description.tsx

@@ -0,0 +1,17 @@
+import { KolLinkButton } from '@public-ui/react';
+import React from 'react';
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const LinkButtonAriaDescription: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample shows KolLinkButton with aria-description</p>
+		</SampleDescription>
+
+		<div className="flex flex-wrap gap-4">
+			<KolLinkButton _href="#/back-page" _label="Link Button Text without area description"></KolLinkButton>
+			<KolLinkButton _href="#/back-page" _label="Link Button Text" _ariaDescription="Link Button Area Description"></KolLinkButton>
+		</div>
+	</>
+);

package/src/components/link-button/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { LinkButtonBasic } from './basic';
+import { LinkButtonAriaDescription } from './aria-description';
 
 export const LINK_BUTTON_ROUTES: Routes = {
 	'link-button': {
 		basic: LinkButtonBasic,
+		'aria-description': LinkButtonAriaDescription,
 	},
 };