@public-ui/sample-react 2.1.9-rc.0 → 2.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "2.1.9-rc.0",
+  "version": "2.1.9",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "repository": {
@@ -36,9 +36,9 @@
     "typescript": "5.6.2",
     "world_countries_lists": "2.9.0",
     "yup": "1.4.0",
-    "@public-ui/components": "2.1.9-rc.0",
-    "@public-ui/themes": "2.1.9-rc.0",
-    "@public-ui/react": "2.1.9-rc.0"
+    "@public-ui/components": "2.1.9",
+    "@public-ui/themes": "2.1.9",
+    "@public-ui/react": "2.1.9"
   },
   "files": [
     ".eslintignore",

package/public/assets/material-icons/iconfont/_variables.scss

@@ -1,3 +1,3 @@
 $material-icons-font-path: './' !default;
-$material-icons-font-size: 24px !default;
+$material-icons-font-size: rem(24) !default;
 $material-icons-font-display: block !default;

package/public/assets/material-symbols/_core.scss

@@ -3,14 +3,13 @@ $material-symbols-font-path: './' !default;
 // @see https://github.com/twbs/bootstrap/blob/main/scss/_functions.scss
 @function material-symbols-str-replace($string, $search, $replace: '') {
   $index: str-index($string, $search);
+
   @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-      material-symbols-str-replace(
-        str-slice($string, $index + str-length($search)),
-        $search,
-        $replace
-      );
+    @return str-slice($string, 1, $index - 1)+$replace +material-symbols-str-replace(str-slice($string, $index + str-length($search)),
+      $search,
+      $replace );
   }
+
   @return $string;
 }
 
@@ -31,7 +30,7 @@ $material-symbols-font-path: './' !default;
     font-family: $font-family;
     font-weight: normal;
     font-style: normal;
-    font-size: 24px;
+    font-size: rem(24);
     line-height: 1;
     letter-spacing: normal;
     text-transform: none;

package/src/App.tsx

@@ -138,7 +138,7 @@ export const App: FC = () => {
 					/>
 				)}
 
-				<main className="flex flex-col items-start p-4" id="route-container">
+				<main className="flex flex-col items-stretch p-4" id="route-container">
 					{!hideMenus && isDraftTheme(theme) && <KolBadge className="block mb-3" _label="DRAFT" _color="#db5461" />}
 					<Routes>
 						{ROUTE_TREE}

package/src/components/alert/basic.tsx

@@ -15,13 +15,13 @@ type PropsBasic = {
 
 const AlertByType: FC<PropsByType> = ({ level, type, variant }) => (
 	<>
-		<KolAlert _label="This is the headline of the alert." _level={level} _type={type} _variant={variant}>
+		<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant}>
 			This is the text of the alert.
 		</KolAlert>
 		<KolAlert _type={type} _variant={variant}>
 			In this alert, only the text without the heading is used.
 		</KolAlert>
-		<KolAlert _label="This is the headline of the alert." _level={level} _type={type} _variant={variant} _hasCloser>
+		<KolAlert _label={`This is the headline level ${level} of the alert.`} _level={level} _type={type} _variant={variant} _hasCloser>
 			This is the text of the alert. With close button.
 		</KolAlert>
 		<KolAlert _type={type} _variant={variant} _hasCloser>

package/src/components/button/icons.tsx

@@ -19,24 +19,26 @@ export const ButtonIcons: FC = () => {
 				<p>This sample shows KolButton with icons in all alignments.</p>
 			</SampleDescription>
 
-			<KolButton
-				_icons={{
-					bottom: 'codicon codicon-arrow-down',
-					left: {
-						icon: 'codicon codicon-arrow-left',
-					},
-					top: {
-						style: {
-							'font-size': '200%',
-							transform: 'rotate(45deg)',
+			<div>
+				<KolButton
+					_icons={{
+						bottom: 'codicon codicon-arrow-down',
+						left: {
+							icon: 'codicon codicon-arrow-left',
 						},
-						icon: 'codicon codicon-arrow-up',
-					},
-					right: 'codicon codicon-arrow-right',
-				}}
-				_label="Label"
-				_on={dummyEventHandler}
-			/>
+						top: {
+							style: {
+								'font-size': '200%',
+								transform: 'rotate(45deg)',
+							},
+							icon: 'codicon codicon-arrow-up',
+						},
+						right: 'codicon codicon-arrow-right',
+					}}
+					_label="Label"
+					_on={dummyEventHandler}
+				/>
+			</div>
 		</>
 	);
 };

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

@@ -0,0 +1,41 @@
+import React, { forwardRef } from 'react';
+import { KolInputDate } from '@public-ui/react';
+import type { Components } from '@public-ui/components';
+
+export const InputDateMinMaxCases = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateCases(props) {
+	const minDateIso = '2024-09-26';
+	const maxDateIso = '2024-09-27';
+
+	const minTimeIso = '12:00';
+	const maxTimeIso = '15:00';
+
+	const minDayTimeIso = '2024-09-26T12:00';
+	const maxDaytimeIso = '2024-09-27T15:00';
+
+	const minWeekIso = '2024-W10';
+	const maxWeekIso = '2024-W50';
+
+	const minMonthIso = '2024-02';
+	const maxMonthIso = '2024-10';
+
+	const minDate = new Date('January 10, 2024, 12:00');
+	const maxDate = new Date('October 20, 2024, 15:00');
+	return (
+		<div className="grid gap-4">
+			<KolInputDate {...props} _type="date" _label="Date with Iso" _min={minDateIso} _max={maxDateIso} />
+			<KolInputDate {...props} _type="date" _label="Date with Date" _min={minDate} _max={maxDate} />
+
+			<KolInputDate {...props} _type="time" _label="Time with Iso" _min={minTimeIso} _max={maxTimeIso} />
+			<KolInputDate {...props} _type="time" _label="Time with Date" _min={minDate} _max={maxDate} />
+
+			<KolInputDate {...props} _type="datetime-local" _label="DayTime with Iso" _min={minDayTimeIso} _max={maxDaytimeIso} />
+			<KolInputDate {...props} _type="datetime-local" _label="DayTime with Date" _min={minDate} _max={maxDate} />
+
+			<KolInputDate {...props} _type="week" _label="Week with Iso" _min={minWeekIso} _max={maxWeekIso} />
+			<KolInputDate {...props} _type="week" _label="Week with Date" _min={minDate} _max={maxDate} />
+
+			<KolInputDate {...props} _type="month" _label="Month with Iso" _min={minMonthIso} _max={maxMonthIso} />
+			<KolInputDate {...props} _type="month" _label="Month with Date" _min={minDate} _max={maxDate} />
+		</div>
+	);
+});

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

@@ -3,6 +3,7 @@ import React, { forwardRef } from 'react';
 import { InputDateCases } from './cases';
 
 import type { Components } from '@public-ui/components';
+import { InputDateMinMaxCases } from './minMax';
 export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.KolInputDate>(function InputDateVariant(props, ref) {
 	return (
 		<div className="grid md:grid-cols-2 gap-4">
@@ -14,6 +15,10 @@ export const InputDateVariants = forwardRef<HTMLKolInputDateElement, Components.
 				<legend>Date (hideLabel)</legend>
 				<InputDateCases ref={ref} {...props} _hideLabel />
 			</fieldset>
+			<fieldset>
+				<legend>Date (with min/max)</legend>
+				<InputDateMinMaxCases ref={ref} {...props} />
+			</fieldset>
 		</div>
 	);
 });

package/src/components/modal/basic.tsx

@@ -1,13 +1,22 @@
 import type { FC } from 'react';
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { KolButton, KolCard, KolModal } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 export const ModalBasic: FC = () => {
+	const [searchParams] = useSearchParams();
+	const modalState = searchParams.get('show-modal') as string;
 	const modalElement = useRef<HTMLKolModalElement>(null);
 	const stackedModalElement = useRef<HTMLKolModalElement>(null);
 
+	useEffect(() => {
+		if (modalState === 'true') {
+			modalElement.current?.openModal();
+		}
+	}, [modalState]);
+
 	return (
 		<>
 			<SampleDescription>

package/src/components/table/horizontal-scrollbar.tsx

@@ -11,8 +11,10 @@ const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '400px' },
+			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '300px' },
 			{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },
+			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
+			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
 		],
 	],
 };
@@ -29,7 +31,7 @@ export const TableHorizontalScrollbar: FC = () => {
 				</p>
 			</SampleDescription>
 
-			<section className="w-full flex flex-col">
+			<section className="w-full flex flex-col gap-4">
 				<KolHeading _label="Table with scrollbar" _level={2} />
 
 				<KolTable
@@ -41,6 +43,17 @@ export const TableHorizontalScrollbar: FC = () => {
 					style={{ width: '400px' }}
 				/>
 
+				<KolHeading _label="Empty Table with scrollbar" _level={3} />
+
+				<KolTable
+					_label="Table for demonstration purposes with horizontal scrollbar with auto minWidth."
+					_minWidth={hasWidthRestriction ? '600px' : 'auto'}
+					_headers={HEADERS}
+					_data={[]}
+					className="block"
+					style={{ width: '400px' }}
+				/>
+
 				<KolInputCheckbox
 					_checked={hasWidthRestriction}
 					_label="Toggle width restriction"

package/src/components/tabs/align.tsx

@@ -0,0 +1,57 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolHeading, KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+import type { AlignPropType } from '@public-ui/components';
+
+const tabs = [
+	{
+		_icons: 'codicon codicon-pie-chart',
+		_label: 'First tab',
+		_on: {
+			onSelect: (event: Event) => {
+				console.log('First tab selected', event);
+			},
+		},
+	},
+	{
+		_icons: 'codicon codicon-calendar',
+		_label: 'Second Tab',
+	},
+	{
+		_disabled: true,
+		_icons: 'codicon codicon-briefcase',
+		_label: 'Disabled Tab',
+	},
+	{
+		_icons: 'codicon codicon-telescope',
+		_label: 'Last tab',
+	},
+];
+
+export const TabsAlign: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolTabs with the property <code>_align</code> set to <code>left</code>, <code>right</code>, <code>top</code> and <code>bottom</code>.
+			</p>
+		</SampleDescription>
+		<div className="grid gap-8">
+			{(['left', 'right', 'top', 'bottom'] as AlignPropType[]).map((align) => {
+				const text = `Tabs with ${align} align`;
+				return (
+					<div key={align} className="grid gap-4">
+						<KolHeading _level={2} _label={text} />
+						<KolTabs _tabs={tabs} _align={align} _label={text}>
+							<div slot="tab-0">Contents of Tab 1</div>
+							<div slot="tab-1">Contents of Tab 2</div>
+							<div slot="tab-2">Contents of Tab 3</div>
+							<div slot="tab-3">Contents of Tab 4</div>
+						</KolTabs>
+					</div>
+				);
+			})}
+		</div>
+	</>
+);

package/src/components/tabs/routes.ts

@@ -1,5 +1,6 @@
 import { Routes } from '../../shares/types';
 import { TabsBasic } from './basic';
+import { TabsAlign } from './align';
 import { TabsIconsOnly } from './icons-only';
 import { TabsBehavior } from './behavior';
 
@@ -8,5 +9,6 @@ export const TABS_ROUTES: Routes = {
 		basic: TabsBasic,
 		'icons-only': TabsIconsOnly,
 		behavior: TabsBehavior,
+		align: TabsAlign,
 	},
 };

package/src/components/toast/basic.tsx

@@ -1,7 +1,9 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { ToasterService } from '@public-ui/components';
 import { KolButton } from '@public-ui/react';
+import type { AlertType, AlertVariant } from '@public-ui/components';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -9,6 +11,9 @@ import { SampleDescription } from '../SampleDescription';
 import type { FC } from 'react';
 
 export const ToastBasic: FC = () => {
+	const [searchParams] = useSearchParams();
+	const defaultType = searchParams.get('type') as AlertType;
+	const defaultVariant = searchParams.get('variant') as AlertVariant;
 	const toaster = ToasterService.getInstance(document);
 	const handleButtonClickSimple = () => {
 		void toaster.enqueue({
@@ -23,10 +28,34 @@ export const ToastBasic: FC = () => {
 			description: 'Toasty',
 			label: `Toast with variant 'msg'`,
 			type: 'warning',
-			alertVariant: 'msg',
+			variant: 'msg',
 		});
 	};
 
+	useEffect(() => {
+		if (defaultType && defaultVariant) {
+			void toaster.enqueue({
+				description: 'Toasty',
+				label: `Toast with variant 'msg'`,
+				type: defaultType,
+				variant: defaultVariant,
+			});
+		} else if (defaultType) {
+			void toaster.enqueue({
+				description: 'Toasty',
+				label: `Initial Toast`,
+				type: defaultType,
+			});
+		} else if (defaultVariant) {
+			void toaster.enqueue({
+				description: 'Toasty',
+				label: `Initial Toast`,
+				type: 'default',
+				variant: defaultVariant,
+			});
+		}
+	}, [defaultType, defaultVariant]);
+
 	const handleButtonClickComplex = () => {
 		void toaster.enqueue({
 			render: (element: HTMLElement, { close }) => {

package/src/hooks/useToasterService.ts

@@ -3,9 +3,9 @@ import { ToasterService } from '@public-ui/components';
 export function useToasterService() {
 	const toaster = ToasterService.getInstance(document);
 
-	const message = () => {
+	const message = (message?: string) => {
 		void toaster.enqueue({
-			description: 'Hello',
+			description: message || 'Hello',
 			label: `Hello`,
 			type: 'info',
 		});
@@ -15,7 +15,13 @@ export function useToasterService() {
 		message();
 	};
 
+	const buttonWithTextClickEventHandler = (e: Event) => {
+		const text = (e.currentTarget as { textContent?: string }).textContent;
+		message(text);
+	};
+
 	return {
 		dummyClickEventHandler,
+		buttonWithTextClickEventHandler,
 	};
 }

package/src/scenarios/change-tabindex.tsx

@@ -0,0 +1,256 @@
+/* eslint-disable jsx-a11y/tabindex-no-positive */
+
+import { SampleDescription } from '../components/SampleDescription';
+import {
+	KolButton,
+	KolButtonLink,
+	KolCard,
+	KolCombobox,
+	KolInputCheckbox,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputColor,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolLinkButton,
+	KolLink,
+	KolSingleSelect,
+	KolSplitButton,
+	KolTextarea,
+} from '@public-ui/react';
+import React from 'react';
+import type { FC } from 'react';
+import { ERROR_MSG, HINT_MSG } from '../shares/constants';
+import { COUNTRY_OPTIONS, COUNTRY_SUGGESTIONS } from '../shares/country';
+import type { Option, StencilUnknown } from '@public-ui/components';
+
+export const ChangeTabindex: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example show how different components works with tabIndex.</p>
+			</SampleDescription>
+
+			<div className="w-full grid gap-4">
+				<KolCard _label="Button" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="Button 1, Tabindex 4" _variant="primary" tabIndex={4} />
+						<KolButton _disabled _label="Button 2, Tabindex 3" _variant="primary" tabIndex={3} />
+						<KolButton _label="Button 3, Tabindex 2" _variant="primary" tabIndex={2} />
+						<KolButton _label="Button 4, Tabindex 1" _variant="primary" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="ButtonLink" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolButtonLink _label="ButtonLink 1, Tabindex 4" tabIndex={4} />
+						<KolButtonLink _disabled _label="ButtonLink 2, Tabindex 3" tabIndex={3} />
+						<KolButtonLink _label="ButtonLink 3, Tabindex 2" tabIndex={2} />
+						<KolButtonLink _label="ButtonLink 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="Combobox" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolCombobox _hint={HINT_MSG} _label="Combobox 1, Tabindex 4" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={4} />
+						<KolCombobox _disabled _hint={HINT_MSG} _label="Combobox 2, Tabindex 3" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={3} />
+						<KolCombobox
+							_touched
+							_hint={HINT_MSG}
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							_label="Combobox 3, Tabindex 2"
+							_suggestions={COUNTRY_SUGGESTIONS}
+							_value={'Deutschland'}
+							tabIndex={2}
+						/>
+						<KolCombobox _hint={HINT_MSG} _label="Combobox 4, Tabindex 1" _suggestions={COUNTRY_SUGGESTIONS} _value={'Deutschland'} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputCheckbox" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputCheckbox _label="InputCheckbox 4, Tabindex 1" _value={false} tabIndex={4} />
+						<KolInputCheckbox _disabled _label="InputCheckbox 3, Tabindex 2" _value={false} tabIndex={3} />
+						<KolInputCheckbox _touched _label="InputCheckbox 2, Tabindex 3" _msg={{ _type: 'error', _description: ERROR_MSG }} _value={false} tabIndex={2} />
+						<KolInputCheckbox _label="InputCheckbox 1, Tabindex 4" _value={false} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputColor" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputColor _value="#f08080" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
+						<KolInputColor _disabled _value="#f08080" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
+						<KolInputColor _touched _value="#f08080" _label="InputCheckbox 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputColor _value="#f08080" _label="InputCheckbox 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputDate" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputDate _type="datetime-local" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
+						<KolInputDate _disabled _type="datetime-local" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
+						<KolInputDate
+							_touched
+							_type="datetime-local"
+							_label="InputCheckbox 3, Tabindex 2"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>
+						<KolInputDate _type="datetime-local" _label="InputCheckbox 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputEmail" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputEmail _label="InputEmail 1, Tabindex 4" tabIndex={4} />
+						<KolInputEmail _disabled _label="InputEmail 2, Tabindex 3" tabIndex={3} />
+						<KolInputEmail _touched _label="InputEmail 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputEmail _label="InputEmail 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputFile" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputFile _label="InputFile 1, Tabindex 4" tabIndex={4} />
+						<KolInputFile _disabled _label="InputFile 2, Tabindex 3" tabIndex={3} />
+						<KolInputFile _touched _label="InputFile 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputFile _label="InputFile 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputNumber" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputNumber _label="InputNumber 1, Tabindex 4" tabIndex={4} />
+						<KolInputNumber _disabled _label="InputNumber 2, Tabindex 3" tabIndex={3} />
+						<KolInputNumber _touched _label="InputNumber 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputNumber _label="InputNumber 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputPassword" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputPassword _label="InputPassword 1, Tabindex 4" tabIndex={4} />
+						<KolInputPassword _disabled _label="InputPassword 2, Tabindex 3" tabIndex={3} />
+						<KolInputPassword _touched _label="InputPassword 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputPassword _label="InputPassword 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputRadio" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 1, Tabindex 4"
+							tabIndex={4}
+						/>
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 2, Tabindex 3"
+							_disabled
+							tabIndex={3}
+						/>
+						<KolInputRadio
+							_touched
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 3, Tabindex 2"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>{' '}
+						<KolInputRadio
+							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
+							_label="InputRadio 4, Tabindex 1"
+							tabIndex={1}
+						/>
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputRange" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputRange _label="InputRange 1, Tabindex 4" _min={0} _max={50} tabIndex={4} />
+						<KolInputRange _disabled _label="InputRange 2, Tabindex 3" _min={0} _max={50} tabIndex={3} />
+						<KolInputRange _touched _label="InputRange 3, Tabindex 2" _min={0} _max={50} _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputRange _label="InputRange 4, Tabindex 1" _min={0} _max={50} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="InputText" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolInputText _label="InputText 1, Tabindex 4" tabIndex={4} />
+						<KolInputText _disabled _label="InputText 2, Tabindex 3" tabIndex={3} />
+						<KolInputText _touched _label="InputText 3, Tabindex 2" _msg={{ _type: 'error', _description: ERROR_MSG }} tabIndex={2} />
+						<KolInputText _label="InputText 4, Tabindex 1" tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="LinkButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolLinkButton _href={'#/back-page'} _label="InputText 1, Tabindex 4" _variant="primary" tabIndex={4}></KolLinkButton>
+						<KolLinkButton _disabled _href={'#/back-page'} _label="InputText 2, Tabindex 3" _variant="primary" tabIndex={3}></KolLinkButton>
+						<KolLinkButton _href={'#/back-page'} _label="InputText 3, Tabindex 2" _variant="primary" tabIndex={2}></KolLinkButton>
+						<KolLinkButton _href={'#/back-page'} _label="InputText 4, Tabindex 1" _variant="primary" tabIndex={1}></KolLinkButton>
+					</div>
+				</KolCard>
+
+				<KolCard _label="Link" _level={0}>
+					<KolLink _href="#/back-page" _label="InputText 1, Tabindex 4" tabIndex={4} />
+					<KolLink _disabled _href="#/back-page" _label="InputText 2, Tabindex 3" tabIndex={3} />
+					<KolLink _href="#/back-page" _label="InputText 3, Tabindex 2" tabIndex={2} />
+					<KolLink _href="#/back-page" _label="InputText 4, Tabindex 1" tabIndex={1} />
+				</KolCard>
+
+				<KolCard _label="SingleSelect" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolSingleSelect _label="InputText 1, Tabindex 4" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={4} />
+						<KolSingleSelect _disabled _label="InputText 2, Tabindex 3" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={3} />
+						<KolSingleSelect
+							_touched
+							_label="InputText 3, Tabindex 2"
+							_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							_value={'de'}
+							tabIndex={2}
+						/>
+						<KolSingleSelect _label="InputText 4, Tabindex 1" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} tabIndex={1} />
+					</div>
+				</KolCard>
+
+				<KolCard _label="SplitButton" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolSplitButton _label="InputText 1, Tabindex 4" tabIndex={4}>
+							Dropdown-Inhalt
+						</KolSplitButton>
+						<KolSplitButton _label="InputText 2, Tabindex 3" tabIndex={3} _disabled>
+							Dropdown-Inhalt
+						</KolSplitButton>
+						<KolSplitButton _label="InputText 3, Tabindex 2" tabIndex={2}>
+							Dropdown-Inhalt
+						</KolSplitButton>{' '}
+						<KolSplitButton _label="InputText 4, Tabindex 1" tabIndex={1}>
+							Dropdown-Inhalt
+						</KolSplitButton>
+					</div>
+				</KolCard>
+
+				<KolCard _label="Textarea" _level={0}>
+					<div className="flex flex-wrap gap-4">
+						<KolTextarea _label="Textarea 1, Tabindex 4" _rows={3} _placeholder="Placeholder" tabIndex={4} />
+						<KolTextarea _disabled _label="Textarea 2, Tabindex 3" _rows={3} _placeholder="Placeholder" tabIndex={3} />
+						<KolTextarea
+							_touched
+							_label="Textarea 3, Tabindex 2"
+							_rows={3}
+							_placeholder="Placeholder"
+							_msg={{ _type: 'error', _description: ERROR_MSG }}
+							tabIndex={2}
+						/>
+						<KolTextarea _label="Textarea 4, Tabindex 1" _rows={3} _placeholder="Placeholder" tabIndex={1} />
+					</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};