@public-ui/sample-react 2.1.7 → 2.1.8-rc.0

package/src/components/tabs/behavior.tsx

@@ -0,0 +1,61 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolHeading, KolTabs } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
+
+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 TabsBehavior: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolTabs with the property <code>_behavior</code> set to <code>select-manual</code> and <code>select-automatic</code>.
+			</p>
+			<p>This property allows controlling when an arrow key is pressed whether the tab change takes place right away or only focuses the tab caption.</p>
+		</SampleDescription>
+		<div className="grid gap-8">
+			<div className="grid gap-4">
+				<KolHeading _level={2} _label='Tabs with "select manual" behavior' />
+				<KolTabs _tabs={tabs} _behavior="select-manual" _label="Tabs with select manual behavior">
+					<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 className="grid gap-4">
+				<KolHeading _level={2} _label='Tabs with "select automatic" behavior' />
+				<KolTabs _tabs={tabs} className="mt-4" _behavior="select-automatic" _label="Tabs with select automatic behavior">
+					<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,10 +1,12 @@
 import { Routes } from '../../shares/types';
 import { TabsBasic } from './basic';
 import { TabsIconsOnly } from './icons-only';
+import { TabsBehavior } from './behavior';
 
 export const TABS_ROUTES: Routes = {
 	tabs: {
 		basic: TabsBasic,
 		'icons-only': TabsIconsOnly,
+		behavior: TabsBehavior,
 	},
 };

package/src/components/textarea/adjust-height.tsx

@@ -19,7 +19,7 @@ export const TextareaAdjustHeight: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm>
+		<KolForm className="w-full">
 			<KolTextarea _adjustHeight={true} _value={VALUE} _label="Text input (auto grow)" />
 		</KolForm>
 	</>

package/src/components/textarea/counter.tsx

@@ -12,6 +12,9 @@ export const TextareaCounter: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolTextarea _label="Textara with counter" _hasCounter={true} />
+		<section className="w-full">
+			<KolTextarea _label="Textara with counter" _hasCounter={true} />
+			<KolTextarea _label="Textara with counter and initial value" _hasCounter={true} _value={'Lorem Ipsum'} className="mt" />
+		</section>
 	</>
 );

package/src/components/textarea/resize.tsx

@@ -12,7 +12,7 @@ export const TextareaResize: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm className="grid gap-4">
+		<KolForm className="w-full grid gap-4">
 			<KolTextarea _resize="both" _label="Text input (both)" />
 			<KolTextarea _resize="vertical" _label="Text input (vertical)" className="mt" />
 			<KolTextarea _resize="horizontal" _label="Text input (horizontal)" className="mt" />

package/src/components/textarea/rows.tsx

@@ -13,7 +13,7 @@ export const TextareaRows: FC = () => (
 			</p>
 		</SampleDescription>
 
-		<KolForm>
+		<KolForm className="w-full">
 			<KolTextarea _rows={10} _label="Texteingabe" />
 		</KolForm>
 	</>

package/src/components/toast/basic.tsx

@@ -71,17 +71,19 @@ export const ToastBasic: FC = () => {
 				<p>This sample demonstrates the toast service with all its options.</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>
+			<section className="grid gap-4">
+				<section className="flex gap-2">
+					<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>
+				</section>
+				<section className="flex gap-2">
+					<KolButton _label="Show toast and close after 2 seconds" _on={{ onClick: () => void handleButtonClickOpenAndClose() }}></KolButton>
+				</section>
+				<section className="flex gap-2">
+					<KolButton _label="Close all toasts" _on={{ onClick: closeAll }}></KolButton>
+				</section>
+			</section>
 		</>
 	);
 };

package/src/react.main.tsx

@@ -3,7 +3,7 @@ import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
 import { setTagNameTransformer } from '@public-ui/react';
 
-import { bootstrap } from '@public-ui/components';
+import { bootstrap, isInitialized } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
 import { BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
 
@@ -34,6 +34,9 @@ const getThemes = async () => {
 
 void (async () => {
 	try {
+		console.info('bootstap is initialized: ', isInitialized());
+		console.info('start kolibri bootstrap');
+
 		await bootstrap(
 			await getThemes(),
 			() => {
@@ -56,6 +59,8 @@ void (async () => {
 				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
 			},
 		);
+
+		console.info('bootstap is initialized: ', isInitialized());
 	} catch (error) {
 		console.warn('Theme registration failed:', error);
 	}

package/src/scenarios/appointment-form/AppointmentForm.tsx

@@ -101,6 +101,7 @@ export function AppointmentForm() {
 
 			<Formik<FormValues> innerRef={formikRef} initialValues={initialValues} validationSchema={validationSchema} onSubmit={handleSubmit}>
 				<KolTabs
+					className="w-full"
 					_tabs={[
 						{
 							_label: '1. Choose registration office',

package/src/scenarios/disabled-interactive-elements.tsx

@@ -50,7 +50,7 @@ export const DisabledInteractiveElements: FC = () => (
 			<p>This implementation ensures standardized use for all users.</p>
 		</SampleDescription>
 
-		<div className="grid gap-4">
+		<div className="w-full grid gap-4">
 			<KolCard _label="Button" _level={0}>
 				<div className="flex flex-wrap gap-4">
 					<KolButton _label="Label" />

package/src/scenarios/focus-elements.tsx

@@ -5,6 +5,7 @@ import {
 	KolButtonLink,
 	KolCombobox,
 	KolDetails,
+	KolHeading,
 	KolInputCheckbox,
 	KolInputColor,
 	KolInputDate,
@@ -30,16 +31,17 @@ import type { FocusableElement } from '@public-ui/components';
 
 const getFocusElements = () => {
 	const focusElements = new Map<string, ForwardRefRenderFunction<any, any>>();
-	focusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox _name="checkbox" _label="Checkbox" ref={ref} />);
-	focusElements.set('inputColor', (_, ref) => <KolInputColor _name="color" _label="Color" ref={ref} />);
-	focusElements.set('inputDate', (_, ref) => <KolInputDate _name="date" _label="Date" ref={ref} />);
-	focusElements.set('inputEmail', (_, ref) => <KolInputEmail _name="email" _label="Email" ref={ref} />);
-	focusElements.set('inputFile', (_, ref) => <KolInputFile _name="file" _label="File" ref={ref} />);
-	focusElements.set('inputFileMultiple', (_, ref) => <KolInputFile _name="file" _label="Files (multiple)" _multiple ref={ref} />);
-	focusElements.set('inputNumber', (_, ref) => <KolInputNumber _name="number" _label="Number" ref={ref} />);
-	focusElements.set('inputPassword', (_, ref) => <KolInputPassword _name="password" _label="Password" ref={ref} />);
+	focusElements.set('inputCheckbox', (_, ref) => <KolInputCheckbox className="w-full" _name="checkbox" _label="Checkbox" ref={ref} />);
+	focusElements.set('inputColor', (_, ref) => <KolInputColor className="w-full" _name="color" _label="Color" ref={ref} />);
+	focusElements.set('inputDate', (_, ref) => <KolInputDate className="w-full" _name="date" _label="Date" ref={ref} />);
+	focusElements.set('inputEmail', (_, ref) => <KolInputEmail className="w-full" _name="email" _label="Email" ref={ref} />);
+	focusElements.set('inputFile', (_, ref) => <KolInputFile className="w-full" _name="file" _label="File" ref={ref} />);
+	focusElements.set('inputFileMultiple', (_, ref) => <KolInputFile className="w-full" _name="file" _label="Files (multiple)" _multiple ref={ref} />);
+	focusElements.set('inputNumber', (_, ref) => <KolInputNumber className="w-full" _name="number" _label="Number" ref={ref} />);
+	focusElements.set('inputPassword', (_, ref) => <KolInputPassword className="w-full" _name="password" _label="Password" ref={ref} />);
 	focusElements.set('inputRadio', (_, ref) => (
 		<KolInputRadio
+			className="w-full"
 			_name="radio"
 			_label="Radio"
 			_options={[
@@ -50,10 +52,11 @@ const getFocusElements = () => {
 			ref={ref}
 		/>
 	));
-	focusElements.set('inputRange', (_, ref) => <KolInputRange _name="range" _label="Range" ref={ref} />);
-	focusElements.set('inputText', (_, ref) => <KolInputText _name="text" _label="Text" ref={ref} />);
+	focusElements.set('inputRange', (_, ref) => <KolInputRange className="w-full" _name="range" _label="Range" ref={ref} />);
+	focusElements.set('inputText', (_, ref) => <KolInputText className="w-full" _name="text" _label="Text" ref={ref} />);
 	focusElements.set('select', (_, ref) => (
 		<KolSelect
+			className="w-full"
 			_name="select"
 			_label="Select"
 			_options={[
@@ -65,6 +68,7 @@ const getFocusElements = () => {
 	));
 	focusElements.set('selectMultiple', (_, ref) => (
 		<KolSelect
+			className="w-full"
 			_name="select"
 			_label="Select (multiple)"
 			_multiple
@@ -78,6 +82,7 @@ const getFocusElements = () => {
 	));
 	focusElements.set('singleSelect', (_, ref) => (
 		<KolSingleSelect
+			className="w-full"
 			_name="singleSelect"
 			_label="Single Select"
 			_options={[
@@ -87,17 +92,17 @@ const getFocusElements = () => {
 			ref={ref}
 		/>
 	));
-	focusElements.set('textarea', (_, ref) => <KolTextarea _name="textarea" _label="Textarea" _rows={5} ref={ref} />);
-	focusElements.set('accordion', (_, ref) => <KolAccordion _label="Accordion here" ref={ref} />);
+	focusElements.set('textarea', (_, ref) => <KolTextarea className="w-full" _name="textarea" _label="Textarea" _rows={5} ref={ref} />);
+	focusElements.set('accordion', (_, ref) => <KolAccordion className="w-full" _label="Accordion here" ref={ref} />);
 	focusElements.set('button', (_, ref) => <KolButton _label="Button here" ref={ref}></KolButton>);
 	focusElements.set('buttonLink', (_, ref) => <KolButtonLink _label="ButtonLink here" ref={ref}></KolButtonLink>);
-	focusElements.set('combobox', (_, ref) => <KolCombobox _label="KolCombobox here" _suggestions={[]} ref={ref}></KolCombobox>);
+	focusElements.set('combobox', (_, ref) => <KolCombobox className="w-full" _label="KolCombobox here" _suggestions={[]} ref={ref}></KolCombobox>);
 	focusElements.set('details', (_, ref) => (
-		<KolDetails _label="Details here" ref={ref}>
+		<KolDetails className="w-full" _label="Details here" ref={ref}>
 			detailed details
 		</KolDetails>
 	));
-	focusElements.set('link', (_, ref) => <KolLink _label="Link here" _href="#" ref={ref}></KolLink>);
+	focusElements.set('link', (_, ref) => <KolLink className="w-full" _label="Link here" _href="#" ref={ref}></KolLink>);
 	focusElements.set('linkButton', (_, ref) => <KolLinkButton _label="LinkButton here" _href="#" ref={ref}></KolLinkButton>);
 
 	return focusElements;
@@ -125,7 +130,7 @@ const Fallback = (props: FallbackProps) => {
 				</KolAlert>
 			)}
 
-			<h4>Focus Test Cases</h4>
+			<KolHeading _level={2} _label="Focus Test Cases" />
 			<ul>
 				{componentNames.map((componentName) => (
 					<li key={componentName}>

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -5,7 +5,7 @@ import { SampleDescription } from '../../components/SampleDescription';
 import { LINKS } from '../../components/nav/links';
 import DATA from './databasedata.json';
 
-import './layout.css';
+import './layout.scss';
 
 const TABS: TabButtonProps[] = [
 	{

package/src/scenarios/horizontal-scrollbar-advanced/layout.scss

@@ -0,0 +1,19 @@
+@import '../../@shared/mixins';
+
+.mainlayout {
+	min-height: calc(100vh - rem(32));
+	width: 100%;
+	display: grid;
+	column-gap: rem(16);
+	grid-template-columns: rem(400) calc(100% - rem(460));
+	grid-template-rows: 1fr;
+	grid-template-areas: 'nav content';
+
+	& > .nav-area {
+		grid-area: nav;
+	}
+
+	& > .content {
+		grid-area: content;
+	}
+}

package/src/scenarios/input-group-with-error.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { FC } from 'react';
+import { KolAlert, KolInputCheckbox, KolInputText } from '@public-ui/react';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const InputGroupWithError: FC = () => {
+	const phoneError = true;
+	const phoneErrorMessage = 'Unrecognized phone number.';
+	const pizzaError = true;
+	const pizzaErrorMessage = 'Choose at least two and up to five toppings.';
+	const pizzaToppings = ['Mushrooms', 'Bell Peppers', 'Onions', 'Olives', 'Spinach', 'Tomatoes', 'Artichokes', 'Zucchini', 'Jalapeños', 'Basil'];
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows how input components can be grouped together with just one error message, without repeating the message for every field.</p>
+				<p>The sample only demonstrates how the errors can be displayed, an actual validation logic is not part of the example.</p>
+			</SampleDescription>
+
+			<fieldset>
+				<legend>Phone number</legend>
+				{phoneError && <KolAlert _alert _type="error" _label={phoneErrorMessage} />}
+
+				<div className="grid grid-cols-3 gap-4 max-w-2xl">
+					<KolInputText _label="Country code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolInputText _label="Area code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolInputText _label="Local number" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+				</div>
+			</fieldset>
+
+			<fieldset className="mt">
+				<legend>Pizza toppings</legend>
+				{pizzaError && <KolAlert _alert _type="error" _label={pizzaErrorMessage} />}
+
+				{pizzaToppings.map((topping) => (
+					<KolInputCheckbox key={topping} _label={topping} _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+				))}
+			</fieldset>
+		</>
+	);
+};

package/src/scenarios/inputs-get-value.tsx

@@ -80,7 +80,7 @@ const Scenario = (props: Props) => {
 					},
 				}}
 			></KolButton>
-			<pre>{formatter(value)}</pre>
+			<pre className="text-base">{formatter(value)}</pre>
 		</div>
 	);
 };
@@ -100,127 +100,129 @@ export const InputsGetValue: FC = () => {
 						</p>
 					</SampleDescription>
 
-					<KolCard _label="Sample options" className="block ha mb-8">
-						<KolInputCheckbox
-							_label="Log events to console"
-							_value={true}
-							_checked={eventLoggerActive}
-							_on={{ onChange: (_, active) => setEventLoggerActive(active as boolean) }}
-						/>
-					</KolCard>
+					<section className="w-full flex flex-col">
+						<KolCard _label="Sample options" className="block ha mb-8">
+							<KolInputCheckbox
+								_label="Log events to console"
+								_value={true}
+								_checked={eventLoggerActive}
+								_on={{ onChange: (_, active) => setEventLoggerActive(active as boolean) }}
+							/>
+						</KolCard>
 
-					<div className="grid gap-4">
-						<Scenario testId="scenario-inputText" InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
-						<Scenario
-							testId="scenario-inputCheckboxString"
-							InputComponent={KolInputCheckbox}
-							inputProps={{ _label: 'KolInputCheckbox (value)', _value: 'Checkbox True Value' }}
-						/>
-						<Scenario testId="scenario-inputCheckboxBoolean" InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (boolean)' }} />
-						<Scenario testId="scenario-inputColor" InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
-						<Scenario testId="scenario-inputDate" InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
-						<Scenario testId="scenario-inputEmail" InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
-						<Scenario
-							testId="scenario-inputFile"
-							InputComponent={KolInputFile}
-							inputProps={{ _label: 'KolInputFile' }}
-							formatter={(value) =>
-								value instanceof FileList
-									? `FileList{${Array.from(value)
-											.map((file: File) => file.name)
-											.join(', ')}}`
-									: JSON.stringify(value)
-							}
-						/>
-						<Scenario testId="scenario-inputNumber" InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
-						<Scenario testId="scenario-inputPassword" InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
-						<Scenario testId="scenario-inputRange" InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
-						<Scenario
-							testId="scenario-inputRadio"
-							InputComponent={KolInputRadio}
-							inputProps={{
-								_label: 'KolInputRadio',
-								_orientation: 'horizontal',
-								_options: [
-									{ label: 'New York', value: 'New York' },
-									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-									{ label: 'Rosenheim', value: 'Rosenheim' },
-								],
-								_value: 'New York',
-							}}
-						/>
-						<Scenario
-							testId="scenario-select"
-							InputComponent={KolSelect}
-							inputProps={{
-								_label: 'KolSelect',
-								_options: [
-									{ label: 'New York', value: 'New York' },
-									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-									{ label: 'Rosenheim', value: 'Rosenheim' },
-								],
-							}}
-						/>
-						<Scenario
-							testId="scenario-singleSelect"
-							InputComponent={KolSingleSelect}
-							inputProps={{
-								_label: 'KolSingleSelect',
-								_options: [
-									{ label: 'New York', value: 'New York' },
-									{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
-									{ label: 'Rosenheim', value: 'Rosenheim' },
-								],
-								_value: 'Rosenheim',
-							}}
-						/>
-						<Scenario
-							testId="scenario-combobox"
-							InputComponent={KolCombobox}
-							inputProps={{
-								_label: 'KolCombobox',
-								_suggestions: COUNTRY_SUGGESTIONS,
-								_value: 'Deutschland',
-							}}
-						/>
-						<Scenario
-							testId="scenario-textarea"
-							InputComponent={KolTextarea}
-							inputProps={{
-								_label: 'KolTextarea',
-							}}
-						/>
-						<Scenario
-							testId="scenario-button"
-							InputComponent={KolButton}
-							inputProps={{
-								_label: 'KolButton',
-								_variant: 'ghost',
-								_value: 'KolButton value',
-							}}
-						/>
-						<Scenario
-							testId="scenario-buttonLink"
-							InputComponent={KolButtonLink}
-							inputProps={{
-								_label: 'KolButtonLink',
-								_value: 'KolButtonLink value',
-							}}
-						/>
-
-						<div className="grid grid-cols-3 gap-4">
-							<div></div>
-							<KolButton
-								_label="Run all"
-								_variant="primary"
-								_on={{
-									onClick: () => {
-										eventTarget.dispatchEvent(new Event('runAll'));
-									},
+						<div className="grid gap-4">
+							<Scenario testId="scenario-inputText" InputComponent={KolInputText} inputProps={{ _label: 'InputText' }} />
+							<Scenario
+								testId="scenario-inputCheckboxString"
+								InputComponent={KolInputCheckbox}
+								inputProps={{ _label: 'KolInputCheckbox (value)', _value: 'Checkbox True Value' }}
+							/>
+							<Scenario testId="scenario-inputCheckboxBoolean" InputComponent={KolInputCheckbox} inputProps={{ _label: 'KolInputCheckbox (boolean)' }} />
+							<Scenario testId="scenario-inputColor" InputComponent={KolInputColor} inputProps={{ _label: 'KolInputColor' }} />
+							<Scenario testId="scenario-inputDate" InputComponent={KolInputDate} inputProps={{ _label: 'KolInputDate' }} />
+							<Scenario testId="scenario-inputEmail" InputComponent={KolInputEmail} inputProps={{ _label: 'KolInputEmail' }} />
+							<Scenario
+								testId="scenario-inputFile"
+								InputComponent={KolInputFile}
+								inputProps={{ _label: 'KolInputFile' }}
+								formatter={(value) =>
+									value instanceof FileList
+										? `FileList{${Array.from(value)
+												.map((file: File) => file.name)
+												.join(', ')}}`
+										: JSON.stringify(value)
+								}
+							/>
+							<Scenario testId="scenario-inputNumber" InputComponent={KolInputNumber} inputProps={{ _label: 'KolInputNumber' }} />
+							<Scenario testId="scenario-inputPassword" InputComponent={KolInputPassword} inputProps={{ _label: 'KolInputPassword' }} />
+							<Scenario testId="scenario-inputRange" InputComponent={KolInputRange} inputProps={{ _label: 'KolInputRange' }} />
+							<Scenario
+								testId="scenario-inputRadio"
+								InputComponent={KolInputRadio}
+								inputProps={{
+									_label: 'KolInputRadio',
+									_orientation: 'horizontal',
+									_options: [
+										{ label: 'New York', value: 'New York' },
+										{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+										{ label: 'Rosenheim', value: 'Rosenheim' },
+									],
+									_value: 'New York',
+								}}
+							/>
+							<Scenario
+								testId="scenario-select"
+								InputComponent={KolSelect}
+								inputProps={{
+									_label: 'KolSelect',
+									_options: [
+										{ label: 'New York', value: 'New York' },
+										{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+										{ label: 'Rosenheim', value: 'Rosenheim' },
+									],
+								}}
+							/>
+							<Scenario
+								testId="scenario-singleSelect"
+								InputComponent={KolSingleSelect}
+								inputProps={{
+									_label: 'KolSingleSelect',
+									_options: [
+										{ label: 'New York', value: 'New York' },
+										{ label: 'Rio de Janeiro', value: 'Rio de Janeiro' },
+										{ label: 'Rosenheim', value: 'Rosenheim' },
+									],
+									_value: 'Rosenheim',
+								}}
+							/>
+							<Scenario
+								testId="scenario-combobox"
+								InputComponent={KolCombobox}
+								inputProps={{
+									_label: 'KolCombobox',
+									_suggestions: COUNTRY_SUGGESTIONS,
+									_value: 'Deutschland',
 								}}
-							></KolButton>
+							/>
+							<Scenario
+								testId="scenario-textarea"
+								InputComponent={KolTextarea}
+								inputProps={{
+									_label: 'KolTextarea',
+								}}
+							/>
+							<Scenario
+								testId="scenario-button"
+								InputComponent={KolButton}
+								inputProps={{
+									_label: 'KolButton',
+									_variant: 'ghost',
+									_value: 'KolButton value',
+								}}
+							/>
+							<Scenario
+								testId="scenario-buttonLink"
+								InputComponent={KolButtonLink}
+								inputProps={{
+									_label: 'KolButtonLink',
+									_value: 'KolButtonLink value',
+								}}
+							/>
+
+							<div className="grid grid-cols-3 gap-4">
+								<div></div>
+								<KolButton
+									_label="Run all"
+									_variant="primary"
+									_on={{
+										onClick: () => {
+											eventTarget.dispatchEvent(new Event('runAll'));
+										},
+									}}
+								></KolButton>
+							</div>
 						</div>
-					</div>
+					</section>
 				</EventLoggerActiveContext.Provider>
 			</EventTargetContext.Provider>
 		</>

package/src/scenarios/routes.ts

@@ -6,15 +6,17 @@ import { InputsGetValue } from './inputs-get-value';
 import { StaticForm } from './static-form';
 import { FocusElements } from './focus-elements';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
+import { InputGroupWithError } from './input-group-with-error';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
 		'appointment-form': AppointmentForm,
-		'inputs-get-value': InputsGetValue,
 		'custom-tooltip-width': CustomTooltipWidth,
-		'static-form': StaticForm,
 		'disabled-interactive-scenario': DisabledInteractiveElements,
 		'focus-elements': FocusElements,
+		'input-group-with-error': InputGroupWithError,
+		'inputs-get-value': InputsGetValue,
+		'static-form': StaticForm,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
 	},
 };