@public-ui/sample-react 4.0.0-alpha.0 → 5.0.0-alpha.0

package/src/react.main.tsx

@@ -1,11 +1,11 @@
+import { setTagNameTransformer } from '@public-ui/react-v19';
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
-import { setTagNameTransformer } from '@public-ui/react';
 
-import { bootstrap, isInitialized } from '@public-ui/components';
+import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
-import { DEFAULT, ECL_EC, ECL_EU, ITZBund } from '@public-ui/themes';
+import { DEFAULT, ECL_EC, ECL_EU } from '@public-ui/themes';
 
 import { App } from './App';
 
@@ -13,6 +13,12 @@ import type { Generic } from 'adopted-style-sheets';
 
 type Theme = Generic.Theming.RegisterPatch<string, string, string>;
 
+const ENABLE_I18N_OVERWRITING =
+	process.env.ENABLE_I18N_OVERWRITING === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableI18nOverwriting');
+
+const ENABLE_THEME_PATCHING =
+	process.env.ENABLE_THEME_PATCHING === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableThemePatching');
+
 const ENABLE_TAG_NAME_TRANSFORMER =
 	process.env.ENABLE_TAG_NAME_TRANSFORMER === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableTagNameTransformer');
 
@@ -24,19 +30,21 @@ if (ENABLE_TAG_NAME_TRANSFORMER) {
 const getThemes = async () => {
 	if (process.env.THEME_MODULE) {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
-		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
+		if (process.env.PLATFORM === 'win32') {
+			/* Add leading slash, required for ESBuild on Windows.
+			   Note: process.env.THEME_MODULE must be used literally in the import(). Moving it to a constant breaks the import. */
+			process.env.THEME_MODULE = `/${process.env.THEME_MODULE}`;
+		}
+		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(/* @vite-ignore */ process.env.THEME_MODULE)) as Record<string, Theme>;
 		return [theme];
 	}
 
 	/* List of regular sample app themes */
-	return [DEFAULT, ECL_EC, ECL_EU, ITZBund] as Theme[];
+	return [DEFAULT, ECL_EC, ECL_EU] as Theme[];
 };
 
 void (async () => {
 	try {
-		console.info('bootstap is initialized: ', isInitialized());
-		console.info('start kolibri bootstrap');
-
 		await bootstrap(
 			await getThemes(),
 			() => {
@@ -47,6 +55,8 @@ void (async () => {
 				} as any);
 			},
 			{
+				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
+				reflectInputValues: true,
 				theme: process.env.THEME_MODULE
 					? undefined
 					: {
@@ -55,12 +65,51 @@ void (async () => {
 				translation: {
 					name: 'en',
 				},
+				/**
+				 * You can add your own translations here.
+				 */
+				translations: ENABLE_I18N_OVERWRITING
+					? new Set([
+							(t) =>
+								t('en', {
+									// https://github.com/public-ui/kolibri/blob/develop/packages/components/src/locales/en.ts
+									'kol-error': 'Tiny error!',
+								}),
+							(t) =>
+								t('de', {
+									// https://github.com/public-ui/kolibri/blob/develop/packages/components/src/locales/de.ts
+									'kol-error': 'Kleiner Fehler!',
+								}),
+						])
+					: undefined,
 				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
-				environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
 			},
 		);
 
-		console.info('bootstap is initialized: ', isInitialized());
+		/**
+		 * You should patch the theme after the components and your default theme are registered.
+		 */
+		if (ENABLE_THEME_PATCHING) {
+			KoliBriDevHelper.patchTheme(
+				'default',
+				{
+					'KOL-BUTTON': `
+						button {
+							border: 1px solid red;
+						}`,
+					'KOL-SPIN': `
+						.bg-spin-2 {
+							background-color: red;
+						}
+						.bg-spin-3 {
+							background-color: gold;
+						}`,
+				},
+				{
+					append: true,
+				},
+			);
+		}
 	} catch (error) {
 		console.warn('Theme registration failed:', error);
 	}

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

@@ -2,7 +2,7 @@ import { Formik } from 'formik';
 import React, { useEffect, useState, useRef } from 'react';
 import * as Yup from 'yup';
 
-import { KolLink, KolTabs } from '@public-ui/react';
+import { KolLink, KolTabs } from '@public-ui/react-v19';
 
 import { checkAppointmentAvailability } from './appointmentService';
 import { AvailableAppointmentsForm } from './AvailableAppointmentsForm';

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

@@ -1,7 +1,7 @@
 import { Field, useFormikContext } from 'formik';
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 
-import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react';
+import { KolButton, KolForm, KolHeading, KolInputDate, KolInputRadio, KolSpin } from '@public-ui/react-v19';
 
 import { fetchAvailableTimes } from './appointmentService';
 

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

@@ -1,7 +1,7 @@
 import { Field, useFormikContext } from 'formik';
 import React, { useState, useRef } from 'react';
 
-import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react';
+import { KolButton, KolForm, KolHeading, KolSelect } from '@public-ui/react-v19';
 
 import type { FieldProps } from 'formik';
 import type { FormValues } from './AppointmentForm';
@@ -62,7 +62,7 @@ export function DistrictForm() {
 							id="field-district"
 							_label="District"
 							_options={[{ label: 'Please select…', value: '' }, ...LOCATION_OPTIONS]}
-							_value={[field.value]}
+							_value={field.value}
 							_msg={{
 								_type: 'error',
 								_description: form.errors.district || '',

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

@@ -1,7 +1,7 @@
 import { Field, useFormikContext } from 'formik';
 import React, { useState, useEffect, useRef } from 'react';
 
-import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react';
+import { KolButton, KolForm, KolHeading, KolInputEmail, KolInputText, KolSelect } from '@public-ui/react-v19';
 
 import type { FieldProps } from 'formik';
 import type { FormValues } from './AppointmentForm';
@@ -57,7 +57,7 @@ export function PersonalInformationForm() {
 							}}
 							id="field-salutation"
 							_label="Salutation"
-							_value={[field.value]}
+							_value={field.value}
 							_msg={{
 								_type: 'error',
 								_description: form.errors.salutation || '',
@@ -145,7 +145,10 @@ export function PersonalInformationForm() {
 								id="field-email"
 								_label="E-Mail"
 								_value={field.value}
-								_error={form.errors.email || ''}
+								_msg={{
+									_type: 'error',
+									_description: form.errors.email || '',
+								}}
 								_touched={form.touched.email}
 								_required
 								_on={{

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

@@ -1,7 +1,7 @@
 import { useFormikContext } from 'formik';
 import React from 'react';
 
-import { KolHeading } from '@public-ui/react';
+import { KolHeading } from '@public-ui/react-v19';
 
 import type { FormValues } from './AppointmentForm';
 

package/src/scenarios/appointment-form/formUtils.ts

@@ -7,6 +7,6 @@ export function createErrorList(formikErrors: Record<string, string>): ErrorList
 	}));
 }
 
-export function focusErrorList(formikRef: React.RefObject<HTMLKolFormElement>) {
+export function focusErrorList(formikRef: React.RefObject<HTMLKolFormElement | null>) {
 	formikRef.current?.focusErrorList().catch(console.warn);
 }

package/src/scenarios/change-tabindex.tsx

@@ -21,7 +21,7 @@ import {
 	KolSingleSelect,
 	KolSplitButton,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import React from 'react';
 import type { FC } from 'react';
 import { ERROR_MSG, HINT_MSG } from '../shares/constants';
@@ -37,7 +37,7 @@ export const ChangeTabindex: FC = () => {
 
 			<div className="w-full grid gap-4">
 				<KolCard _label="Button" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -46,7 +46,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="ButtonLink" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -55,7 +55,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Combobox" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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
@@ -72,7 +72,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputCheckbox" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -81,7 +81,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputColor" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -90,7 +90,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputDate" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputDate _type="datetime-local" _label="InputCheckbox 1, Tabindex 4" tabIndex={4} />
 						<KolInputDate _disabled _type="datetime-local" _label="InputCheckbox 2, Tabindex 3" tabIndex={3} />
 						<KolInputDate
@@ -105,7 +105,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputEmail" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -114,7 +114,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputFile" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -123,7 +123,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputNumber" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -132,7 +132,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputPassword" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -141,7 +141,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputRadio" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolInputRadio
 							_options="[{'label':'Mrs.','value':'Mrs.'},{'disabled':true,'label':'Mr. (disabled)','value':'Mr.'},{'label':'Company','value':'Company'}]"
 							_label="InputRadio 1, Tabindex 4"
@@ -169,7 +169,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputRange" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -178,7 +178,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="InputText" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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} />
@@ -187,7 +187,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="LinkButton" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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>
@@ -196,14 +196,16 @@ export const ChangeTabindex: FC = () => {
 				</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} />
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
+						<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} />
+					</div>
 				</KolCard>
 
 				<KolCard _label="SingleSelect" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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
@@ -219,7 +221,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="SplitButton" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<KolSplitButton _label="InputText 1, Tabindex 4" tabIndex={4}>
 							Dropdown-Inhalt
 						</KolSplitButton>
@@ -228,7 +230,7 @@ export const ChangeTabindex: FC = () => {
 						</KolSplitButton>
 						<KolSplitButton _label="InputText 3, Tabindex 2" tabIndex={2}>
 							Dropdown-Inhalt
-						</KolSplitButton>{' '}
+						</KolSplitButton>
 						<KolSplitButton _label="InputText 4, Tabindex 1" tabIndex={1}>
 							Dropdown-Inhalt
 						</KolSplitButton>
@@ -236,7 +238,7 @@ export const ChangeTabindex: FC = () => {
 				</KolCard>
 
 				<KolCard _label="Textarea" _level={0}>
-					<div className="flex flex-wrap gap-4">
+					<div className="grid sm:flex flex-wrap gap-4 items-end">
 						<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

package/src/scenarios/custom-tooltip-width.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolButton } from '@public-ui/react';
+import { KolButton } from '@public-ui/react-v19';
 import { SampleDescription } from '../components/SampleDescription';
 import { useToasterService } from '../hooks/useToasterService';
 

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

@@ -18,7 +18,7 @@ import {
 	KolLinkButton,
 	KolSelect,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../components/SampleDescription';

package/src/scenarios/focus-elements.tsx

@@ -21,7 +21,7 @@ import {
 	KolSelect,
 	KolSingleSelect,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 import type { FC, ForwardRefRenderFunction } from 'react';
 import { useMemo } from 'react';
 import React, { forwardRef, useLayoutEffect, useRef } from 'react';

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { KolTable, KolTabs, KolNav } from '@public-ui/react';
+import { KolTableStateful, KolTabs, KolNav } from '@public-ui/react-v19';
 import type { KoliBriTableHeaders, TabButtonProps } from '@public-ui/components';
 import { SampleDescription } from '../../components/SampleDescription';
 import { LINKS } from '../../components/nav/links';
@@ -47,14 +47,20 @@ function TableHorizontalScrollbarAdvanced() {
 		let width = 0;
 
 		for (const def of columnDefinitions as { width: string }[]) {
-			width += Number(def.width?.replace('px', '') || 0);
+			width += parseFloat(def.width?.replace('px', '') || '0');
 		}
 		return `${width}px`;
 	});
 
 	return (
 		<>
-			<SampleDescription></SampleDescription>
+			<SampleDescription>
+				<p>
+					This advanced scenario demonstrates a complex layout with KolTable featuring horizontal scrollbar within a tab-based navigation system. The table
+					automatically calculates its minimum width based on column definitions and provides smooth horizontal scrolling when content exceeds the container
+					width. This example showcases real-world usage in a dashboard-like interface with sidebar navigation and tabbed content areas.
+				</p>
+			</SampleDescription>
 			<div className="mainlayout">
 				<aside className="nav-area">
 					<KolNav _label="Main navigation" _links={LINKS} _hasCompactButton _hasIconsWhenExpanded />
@@ -62,7 +68,7 @@ function TableHorizontalScrollbarAdvanced() {
 				<div className="content">
 					<KolTabs _tabs={TABS} _align="top" _label="Demo Tabs">
 						<div style={{ overflow: 'hidden' }}>
-							<KolTable
+							<KolTableStateful
 								_label="Table for demonstration purposes with horizontal scrollbar"
 								_minWidth={tableWith}
 								_headers={HEADERS}

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

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { FC } from 'react';
-import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react';
+import { KolAlert, KolInputCheckbox, KolInputText, KolSelect } from '@public-ui/react-v19';
 import { SampleDescription } from '../components/SampleDescription';
 import type { SelectOption } from '@public-ui/components';
 
@@ -42,9 +42,9 @@ export const InputGroupWithError: FC = () => {
 				{phoneError && <KolAlert _alert _type="error" _label={phoneErrorMessage} />}
 
 				<div className="grid grid-cols-3 gap-4 max-w-2xl">
-					<KolSelect _options={countryCodes} _label="CountryCode " _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 />
+					<KolSelect _options={countryCodes} _label="CountryCode " _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
+					<KolInputText _label="Area code" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
+					<KolInputText _label="Local number" _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
 				</div>
 			</fieldset>
 
@@ -53,7 +53,7 @@ export const InputGroupWithError: FC = () => {
 				{pizzaError && <KolAlert _alert _type="error" _label={pizzaErrorMessage} />}
 
 				{pizzaToppings.map((topping) => (
-					<KolInputCheckbox key={topping} _label={topping} _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideError />
+					<KolInputCheckbox key={topping} _label={topping} _msg={{ _description: phoneErrorMessage, _type: 'error' }} _touched _hideMsg />
 				))}
 			</fieldset>
 		</>

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

@@ -19,7 +19,7 @@ import {
 	KolSingleSelect,
 	KolCombobox,
 	KolTextarea,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 
 import { SampleDescription } from '../components/SampleDescription';
 import { COUNTRY_SUGGESTIONS } from '../shares/country';
@@ -37,14 +37,16 @@ type Props = {
 	testId?: string;
 };
 const Scenario = (props: Props) => {
-	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>();
-	const [value, setValue] = useState<unknown>(undefined);
+	const ref = useRef<HTMLStencilElement & { getValue: () => Promise<any> }>(null);
+	const [displayValue, setDisplayValue] = useState<unknown>(undefined);
+	const [modelValue, setModelValue] = useState<unknown>(props.inputProps._value);
 	const formatter = props.formatter || JSON.stringify;
 	const eventTarget = useContext(EventTargetContext);
 	const eventLoggerActive = useContext(EventLoggerActiveContext);
 
 	const handleButtonClick = async () => {
-		setValue(await ref.current?.getValue());
+		const value = await ref.current?.getValue();
+		setDisplayValue(value);
 	};
 
 	useEffect(() => {
@@ -65,6 +67,9 @@ const Scenario = (props: Props) => {
 				if (eventLoggerActive) {
 					console.log(props.inputProps._label, eventName, value, event);
 				}
+				if (eventName === 'onInput') {
+					setModelValue(value);
+				}
 			},
 		]),
 	);
@@ -72,7 +77,7 @@ const Scenario = (props: Props) => {
 	return (
 		<>
 			<div className="grid grid-cols-3 items-end gap-4" data-testid={props.testId}>
-				<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} />
+				<props.InputComponent ref={ref} _on={eventListeners} {...props.inputProps} _value={modelValue} />
 				<KolButton
 					_label="getValue()"
 					_on={{
@@ -81,7 +86,7 @@ const Scenario = (props: Props) => {
 						},
 					}}
 				></KolButton>
-				<pre className="text-base">{formatter(value)}</pre>
+				<pre className="text-base">{formatter(displayValue)}</pre>
 			</div>
 		</>
 	);

package/src/scenarios/performance-test.tsx

@@ -0,0 +1,27 @@
+import { KolInputCheckbox, KolInputNumber, KolInputText } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+
+const MAX_LENGTH = 333;
+const NUMBER_OF_INPUTS = new Array(MAX_LENGTH).fill(0).map((_, i) => i + 1);
+
+export const PerformanceTest: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This example renders many KoliBri components to show the performance.</p>
+			</SampleDescription>
+
+			<div className="w-full grid gap-4">
+				{NUMBER_OF_INPUTS.map((idx) => (
+					<div className="flex flex-wrap items-end gap-4" key={idx}>
+						<KolInputText _label={`TextInput #${idx}`} />
+						<KolInputNumber _label={`NumberInput #${idx}`} />
+						<KolInputCheckbox _label={`Checkbox #${idx}`} />
+					</div>
+				))}
+			</div>
+		</>
+	);
+};