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

package/public/assets/material-symbols-subset/variables.scss

@@ -0,0 +1,49 @@
+$icomoon-font-family: "material-symbols-subset" !default;
+$icomoon-font-path: "fonts" !default;
+
+$icon-add: "\e926";
+$icon-arrow-back: "\e922";
+$icon-arrow-down: "\e925";
+$icon-arrow-forward: "\e923";
+$icon-arrow-up: "\e924";
+$icon-autorenew: "\e921";
+$icon-brightness-medium: "\e902";
+$icon-calendar-today: "\e920";
+$icon-check: "\e91f";
+$icon-checklist: "\e91e";
+$icon-chevron-left: "\e91d";
+$icon-chevron-right: "\e91c";
+$icon-close: "\e91b";
+$icon-content-copy: "\e91a";
+$icon-danger: "\e919";
+$icon-dark-mode: "\e900";
+$icon-delete: "\e918";
+$icon-download: "\e917";
+$icon-draft: "\e916";
+$icon-drive-folder-upload: "\e915";
+$icon-easy-language: "\e914";
+$icon-edit: "\e913";
+$icon-help: "\e911";
+$icon-home: "\e912";
+$icon-info: "\e910";
+$icon-keyboard-double-arrow-left: "\e90f";
+$icon-keyboard-double-arrow-right: "\e90e";
+$icon-light-mode: "\e901";
+$icon-logout: "\e90d";
+$icon-mail: "\e90c";
+$icon-more-vert: "\e90b";
+$icon-open-in-new: "\e90a";
+$icon-palette: "\e92b";
+$icon-question-mark: "\e909";
+$icon-remove: "\e92c";
+$icon-save: "\e92d";
+$icon-search: "\e908";
+$icon-settings: "\e92e";
+$icon-sign-language: "\e907";
+$icon-success: "\e906";
+$icon-unfold-less: "\e92f";
+$icon-view-timeline: "\e930";
+$icon-visibility-off: "\e904";
+$icon-visibility: "\e905";
+$icon-warning: "\e903";
+

package/src/App.tsx

@@ -34,7 +34,7 @@ export const App: FC<Props> = ({ customThemes }) => {
 		setRegisteredThemes(allThemes);
 		return allThemes;
 	}, [customThemes]);
-	const theme: string = searchParams.get('theme') ?? themes[1].key;
+	const theme: string = searchParams.get('theme') ?? getTheme();
 
 	const getRouteList = (routes: MyRoutes, offset = '/'): string[] => {
 		let list: string[] = [];

package/src/components/button-link/basic.tsx

@@ -51,6 +51,9 @@ export const ButtonLinkBasic: FC = () => {
 				<p>
 					<KolButtonLink _label="Disabled ButtonLink" _inline={false} _shortKey="s" />
 				</p>
+				<p>
+					<KolButtonLink _label="Special Variant ButtonLink" _variant="theme-link" />
+				</p>
 			</section>
 		</>
 	);

package/src/components/handout/basic.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps, KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';
+import type { KoliBriTableCell, KoliBriTableHeaders } from '@public-ui/components';
 import {
 	KolAbbr,
 	KolAccordion,
@@ -32,7 +32,7 @@ import {
 	KolTextarea,
 	KolVersion,
 } from '@public-ui/react-v19';
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 import React from 'react';
 
 import { useToasterService } from '../../hooks/useToasterService';
@@ -40,14 +40,14 @@ import { getRoot } from '../../shares/react-roots';
 import { getTheme, getThemeName } from '../../shares/store';
 import { TABLE_DATA, type TableDataType } from './table-data';
 
-function KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {
-	const { dummyClickEventHandler } = useToasterService();
+type KolButtonProps = ComponentProps<typeof KolButton>;
 
+function KolButtonWrapper(props: KolButtonProps & { style: Record<string, unknown> }) {
+	const { dummyClickEventHandler } = useToasterService();
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};
-
-	return <KolButton {...other} _on={dummyEventHandler} />;
+	return <KolButton {...props} _on={dummyEventHandler} />;
 }
 
 const TABLE_HEADERS: KoliBriTableHeaders = {

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

@@ -0,0 +1,30 @@
+import type { FC } from 'react';
+import React from 'react';
+
+import { KolInputText } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+const PATTERN = '^[A-Za-z]{3}-\\d{3}$';
+
+export const InputTextPattern: FC = () => (
+	<>
+		<SampleDescription>
+			<p>This sample demonstrates HTML5 pattern validation for both native input and KolInputText components.</p>
+		</SampleDescription>
+		<form className="grid gap-4">
+			<div className="grid gap-2">
+				<label htmlFor="native-input">Native Input (Pattern: AAA-123, case-insensitive)</label>
+				<input id="native-input" name="native-input" pattern={PATTERN} type="text" />
+			</div>
+			<KolInputText
+				_label="KoliBri Input (Pattern: AAA-123, case-insensitive)"
+				_name="kolibri-input"
+				_pattern={PATTERN}
+				_hint="Note: This input is not linked to the form element. The validation inside the Shadow DOM is currently not triggered on form submit."
+			/>
+			<div>
+				<button type="submit">Submit</button>
+			</div>
+		</form>
+	</>
+);

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

@@ -8,6 +8,7 @@ import { InputTextExpertSlot } from './expert-slot';
 import { InputTextHideLabel } from './hide-label';
 import { InputTextHideMsg } from './hide-msg';
 import { InputTextMessageTypes } from './message-types';
+import { InputTextPattern } from './pattern';
 import { InputTextPlaceholder } from './placeholder';
 import { InputTextReadonly } from './readonly';
 import { InputTextSelectRange } from './select-range';
@@ -28,6 +29,7 @@ export const INPUT_TEXT_ROUTES: Routes = {
 		'text-formatter': InputTextFormatterDemo,
 		'smart-button': InputTextSmartButton,
 		'expert-slot': InputTextExpertSlot,
+		pattern: InputTextPattern,
 		'select-range': InputTextSelectRange,
 		background: InputTextBackground,
 	},

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

@@ -1,48 +1,139 @@
-import { KolForm, KolInputText } from '@public-ui/react-v19';
-import React, { useMemo, useRef, type BaseSyntheticEvent } from 'react';
+import { KolForm, KolHeading, KolInputText } from '@public-ui/react-v19';
+import * as React from 'react';
 import { Controller, useForm } from 'react-hook-form';
-
 import { SampleDescription } from '../SampleDescription';
 
-type InputTextElementSelection = {
-	setSelectionStart?: (position: number) => Promise<void>;
-	selectionStart?: () => Promise<number | null>;
-};
+/**
+ * IbanFormatter handles formatting and parsing of IBAN values.
+ * It groups characters in blocks of 4, separated by spaces.
+ * Example: "DE89370400440532013000" → "DE89 3704 0044 0532 0130 00"
+ */
+class IbanFormatter {
+	private readonly SEPARATOR = ' ';
+	private readonly CHARS_PER_GROUP = 4;
+	private readonly KEEP_ALPHANUM = /[^a-zA-Z0-9]/g;
 
-type KolInputTextEvents = {
-	onBlur?: (event: Event) => void;
-	onChange?: (event: Event, value: unknown) => void;
-	onFocus?: (event: Event) => void;
-	onInput?: (event: Event, value: unknown) => void;
-};
-type KolInputTextProps = Omit<React.ComponentProps<typeof KolInputText>, '_on' | '_value'> & {
-	_on?: KolInputTextEvents;
-	_value?: string;
-};
+	/**
+	 * Removes all non-alphanumeric characters and converts to uppercase.
+	 * This is the raw value stored in the form model.
+	 */
+	parse(value: string): string {
+		return value.replace(this.KEEP_ALPHANUM, '').toUpperCase();
+	}
 
-const NON_ALPHANUM = /[^a-zA-Z0-9]/g;
-const EVERY_FOUR_CHARS = /(.{4})(?!$)/g;
+	/**
+	 * Formats the value into groups of 4 characters separated by spaces.
+	 * This is the display value shown in the input field.
+	 */
+	format(value: string): string {
+		const clean = this.parse(value);
+		const regex = new RegExp(`(.{${this.CHARS_PER_GROUP}})(?!$)`, 'g');
+		return clean.replace(regex, `$1${this.SEPARATOR}`);
+	}
 
-class IbanFormatter {
-	private electronicFormat(iban: string): string {
-		return iban.replace(NON_ALPHANUM, '').toUpperCase();
+	/**
+	 * Calculates the correct cursor position after formatting changes.
+	 * This ensures the cursor stays at the expected position when separators are added/removed.
+	 */
+	adjustCursorPosition(oldValue: string, newValue: string, oldCursorPos: number): number {
+		const oldText = this.format(oldValue);
+		const newText = this.format(newValue);
+
+		if (oldCursorPos >= oldText.length) return newText.length;
+
+		// Count significant characters (excluding separators) up to cursor position
+		let significantChars = 0;
+		for (let i = 0; i < oldCursorPos && i < oldText.length; i++) {
+			if (oldText[i] !== this.SEPARATOR) significantChars++;
+		}
+
+		// Find the corresponding position in the new formatted text
+		let count = 0;
+		for (let i = 0; i < newText.length; i++) {
+			if (newText[i] !== this.SEPARATOR && count++ === significantChars) return i;
+		}
+		return newText.length;
 	}
+}
+
+/**
+ * CurrencyFormatter handles formatting and parsing of currency values.
+ * It uses the browser's locale for formatting and intelligently detects
+ * decimal vs. thousand separators when parsing.
+ * Example: 1000000 → "1.000.000,00 €" (German locale)
+ */
+class CurrencyFormatter {
+	private readonly LOCALE = navigator.language;
+	private readonly CURRENCY_SYMBOL = ' €';
+
+	/**
+	 * Parses a formatted currency string back to a raw number.
+	 * Intelligently detects which character is the decimal separator:
+	 * - German format: "1.000.000,00" → 1000000 (dot is thousand, comma is decimal)
+	 * - English format: "1,000,000.00" → 1000000 (comma is thousand, dot is decimal)
+	 */
+	parse(value: string): number {
+		// Remove currency symbols and keep only digits, dots, and commas
+		const sanitized = value.replace(/[^\d.,]/g, '');
+
+		// Determine which character is the decimal separator
+		// The rightmost occurrence is typically the decimal separator
+		const lastCommaIndex = sanitized.lastIndexOf(',');
+		const lastDotIndex = sanitized.lastIndexOf('.');
 
-	private printFormat(iban: string, separator?: string) {
-		return this.electronicFormat(iban).replace(EVERY_FOUR_CHARS, '$1' + (separator || ' '));
+		let normalizedValue: string;
+
+		if (lastCommaIndex > lastDotIndex) {
+			// Comma is decimal separator (e.g., German: 1.000.000,00)
+			// Remove all dots (thousand separators) and replace comma with dot for parseFloat
+			normalizedValue = sanitized.replace(/\./g, '').replace(',', '.');
+		} else if (lastDotIndex > lastCommaIndex) {
+			// Dot is decimal separator (e.g., English: 1,000,000.00)
+			// Remove all commas (thousand separators)
+			normalizedValue = sanitized.replace(/,/g, '');
+		} else {
+			// No decimal separator present, remove all dots and commas
+			normalizedValue = sanitized.replace(/[.,]/g, '');
+		}
+
+		return parseFloat(normalizedValue) || 0;
 	}
 
-	public parse(value: string): string {
-		return this.electronicFormat(value);
+	/**
+	 * Formats a number as currency according to the browser's locale.
+	 * Always shows 2 decimal places and appends the currency symbol.
+	 */
+	format(value: number | string): string {
+		const number = typeof value === 'string' ? this.parse(value) : value;
+		const formatted = new Intl.NumberFormat(this.LOCALE, {
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2,
+		}).format(number);
+		return formatted + this.CURRENCY_SYMBOL;
 	}
 
-	public format(value: string, ref?: HTMLKolInputTextElement | null, selectionStart?: number | null): string {
-		const setSelectionStart = (ref as InputTextElementSelection | null)?.setSelectionStart;
-		if (selectionStart && setSelectionStart) {
-			if (selectionStart % 5 === 0) selectionStart++;
-			void setSelectionStart(selectionStart);
+	/**
+	 * Calculates the correct cursor position after formatting changes.
+	 * This ensures the cursor stays aligned with digits when thousand separators are added/removed.
+	 */
+	adjustCursorPosition(oldValue: string, newValue: string, oldCursorPos: number): number {
+		const oldText = this.format(oldValue);
+		const newText = this.format(newValue);
+
+		if (oldCursorPos >= oldText.length) return newText.length;
+
+		// Count digits up to cursor position (ignoring separators and currency symbols)
+		let digitCount = 0;
+		for (let i = 0; i < oldCursorPos && i < oldText.length; i++) {
+			if (/\d/.test(oldText[i])) digitCount++;
 		}
-		return this.printFormat(value);
+
+		// Find the corresponding position in the new formatted text
+		let count = 0;
+		for (let i = 0; i < newText.length; i++) {
+			if (/\d/.test(newText[i]) && count++ === digitCount) return i;
+		}
+		return newText.length;
 	}
 }
 
@@ -50,129 +141,139 @@ type IbanExampleFormValues = {
 	iban: string;
 };
 
-function FormattedKolInputText({
-	formatter,
-	selectionStartRef,
-	_on,
-	_value,
-	...props
-}: KolInputTextProps & {
-	formatter: IbanFormatter;
-	selectionStartRef: React.MutableRefObject<number | null>;
-}) {
-	const inputRef = useRef<HTMLKolInputTextElement | null>(null);
-	const normalizedOn = _on && typeof _on === 'object' ? (_on as KolInputTextEvents) : undefined;
-	const sanitizedSelectionRef = selectionStartRef as React.MutableRefObject<number | null>;
-
-	const element = inputRef.current;
-	const selectionStart = sanitizedSelectionRef.current;
-	const sanitizedFormatter: IbanFormatter = formatter;
-
-	return (
-		<KolInputText
-			{...props}
-			ref={inputRef}
-			_value={sanitizedFormatter.format(_value ?? '', element, selectionStart)}
-			_on={{
-				...normalizedOn,
-				onInput: (event: Event, value: unknown) => {
-					const selectionStartGetter = (inputRef.current as InputTextElementSelection | null)?.selectionStart;
-					selectionStartGetter?.().then((start) => {
-						sanitizedSelectionRef.current = start ?? null;
-					});
-					const parsedValue = sanitizedFormatter.parse(typeof value === 'string' ? value : '');
-					normalizedOn?.onInput?.(event, parsedValue);
-				},
-			}}
-		/>
-	);
-}
-
-function KolFormattedIbanController(props: any) {
-	const { name, control, rules, defaultValue, shouldUnregister, disabled, formatter, selectionStartRef, ...componentProps } = props;
-	return (
-		<Controller
-			name={name}
-			control={control}
-			rules={rules}
-			defaultValue={defaultValue}
-			shouldUnregister={shouldUnregister}
-			disabled={disabled}
-			render={({ field, fieldState }) => {
-				// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-				const userHandlers = componentProps._on as KolInputTextEvents | undefined;
-				return (
-					<FormattedKolInputText
-						{...(componentProps as any)}
-						formatter={formatter}
-						selectionStartRef={selectionStartRef}
-						_value={field.value}
-						_touched={fieldState.isTouched}
-						_msg={
-							fieldState.error
-								? {
-										_type: 'error' as const,
-										_description: fieldState.error.message || String(fieldState.error),
-									}
-								: undefined
-						}
-						_on={{
-							onInput: (event: Event, value: unknown) => {
-								field.onChange(value);
-								userHandlers?.onInput?.(event, value);
-							},
-							onBlur: () => field.onBlur(),
-						}}
-					/>
-				);
-			}}
-		/>
-	);
-}
+type CurrencyExampleFormValues = {
+	currency: number;
+};
 
+/**
+ * Demo component showcasing two different text formatting strategies for input fields.
+ *
+ * Strategy 1 - Live Formatting (IBAN):
+ * - Formats text while typing
+ * - Maintains intelligent cursor positioning
+ * - Best for: Fixed-format values where users expect immediate visual feedback
+ *
+ * Strategy 2 - On-Blur Formatting (Currency):
+ * - Formats only when field loses focus (onBlur event)
+ * - Allows free typing without formatting interruptions
+ * - Best for: Numeric values where users might type in various formats
+ */
 export function InputTextFormatterDemo() {
-	const formatter = useMemo(() => new IbanFormatter(), []);
-
-	const textInput1SelectionStart = useRef<number | null>(null);
-
-	const initialIbanExampleValues: IbanExampleFormValues = {
-		iban: 'DE89370400440532013000',
-	};
+	const ibanFormatter = new IbanFormatter();
+	const currencyFormatter = new CurrencyFormatter();
 
 	const ibanForm = useForm<IbanExampleFormValues>({
-		defaultValues: initialIbanExampleValues,
-		mode: 'onTouched',
+		defaultValues: { iban: 'DE89370400440532013000' },
 	});
+	const currencyForm = useForm<CurrencyExampleFormValues>({
+		defaultValues: { currency: 1000000 },
+	});
+
+	/**
+	 * Handles input events for the IBAN field with live formatting.
+	 * Updates the model value and adjusts cursor position to maintain UX during formatting.
+	 */
+	const handleIbanInput = (event: Event) => {
+		const input = event.target as HTMLInputElement;
+		const newValue = ibanFormatter.parse(input.value);
+		const newCursorPos = ibanFormatter.adjustCursorPosition(ibanForm.getValues('iban'), newValue, input.selectionStart || 0);
 
-	const ibanValues = ibanForm.watch();
+		// Update the form model with the parsed (unformatted) value
+		ibanForm.setValue('iban', newValue);
 
-	const handleIbanSubmit = (event: Event) => {
-		void ibanForm.handleSubmit(async () => {})(event as unknown as BaseSyntheticEvent);
+		// Use double requestAnimationFrame to ensure cursor position is set after React re-render
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				input.setSelectionRange(newCursorPos, newCursorPos);
+			});
+		});
 	};
 
 	return (
 		<>
 			<SampleDescription>
+				<p>This example demonstrates two different formatting strategies for input fields:</p>
+				<ul>
+					<li>
+						<strong>Live Formatting (IBAN):</strong> Formatting happens while typing. The value is immediately formatted and displayed with intelligent cursor
+						positioning. Best for fixed-format values where users expect visual feedback during input.
+					</li>
+					<li>
+						<strong>On-Blur Formatting (Currency):</strong> Formatting happens when leaving the field (onBlur event). Allows free typing without interruption.
+						Best for numeric values where users might input in various formats.
+					</li>
+				</ul>
 				<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)
+					<strong>Key Concept:</strong> The form model always stores the <em>unformatted</em> value (raw IBAN string, numeric currency value), while the input
+					field displays the <em>formatted</em> value for better readability.
 				</p>
 			</SampleDescription>
-			<section className="w-full">
-				<div>
-					<KolForm _on={{ onSubmit: handleIbanSubmit }}>
-						<KolFormattedIbanController
-							control={ibanForm.control as any}
-							name="iban"
-							id="field-iban"
-							formatter={formatter}
-							selectionStartRef={textInput1SelectionStart}
-							rules={{ required: 'Please enter an IBAN.' }}
-							_label="IBAN"
-							_required
-						/>
+			<section className="w-full flex flex-col">
+				<div className="p-2">
+					<KolHeading _label="Live Formatting - IBAN" _level={2} />
+					<p className="text-sm mb-2">Formatting occurs during input with intelligent cursor control</p>
+					<KolForm>
+						<form onSubmit={ibanForm.handleSubmit(async () => {})}>
+							<Controller
+								name="iban"
+								control={ibanForm.control}
+								render={({ field }) => (
+									<div className="block mt-2">
+										<KolInputText
+											id="field-iban"
+											_label="IBAN"
+											_value={ibanFormatter.format(field.value ?? '')}
+											_required
+											_on={{
+												onInput: handleIbanInput,
+												onBlur: field.onBlur,
+											}}
+										/>
+									</div>
+								)}
+							/>
+						</form>
 					</KolForm>
-					<pre className="text-base mt-2">{JSON.stringify(ibanValues, null, 2)}</pre>
+				</div>
+				<div className="p-2">
+					<KolHeading _label="Model (Unformatted Value)" _level={2} />
+					<pre className="text-base">{JSON.stringify(ibanForm.watch(), null, 2)}</pre>
+				</div>
+			</section>
+
+			<section className="w-full flex flex-col">
+				<div className="p-2">
+					<KolHeading _label="On-Blur Formatting - Currency" _level={2} />
+					<p className="text-sm mb-2">Formatting occurs when leaving the field (onBlur) for uninterrupted input</p>
+					<KolForm>
+						<form onSubmit={currencyForm.handleSubmit(async () => {})}>
+							<Controller
+								name="currency"
+								control={currencyForm.control}
+								render={({ field }) => (
+									<div className="block mt-2">
+										<KolInputText
+											id="field-currency"
+											_label="Currency"
+											_value={currencyFormatter.format(field.value ?? 0)}
+											_on={{
+												onBlur: (event: Event) => {
+													const input = event.target as HTMLInputElement;
+													const parsedValue = currencyFormatter.parse(input.value);
+													field.onChange(parsedValue);
+													field.onBlur();
+												},
+											}}
+										/>
+									</div>
+								)}
+							/>
+						</form>
+					</KolForm>
+				</div>
+				<div className="p-2">
+					<KolHeading _label="Model (Numeric Value)" _level={2} />
+					<pre className="text-base">{JSON.stringify(currencyForm.watch(), null, 2)}</pre>
 				</div>
 			</section>
 		</>

package/src/components/link/basic.tsx

@@ -31,6 +31,7 @@ export const LinkBasic: FC = () => (
 				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>
+			<KolLink _href="#/back-page" _inline={false} _label="Special Variant Link" _variant="theme-link" />
 		</div>
 	</>
 );

package/src/components/table/interactive-child-elements.tsx

@@ -1,19 +1,19 @@
-import type { ButtonProps, ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
+import type { ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
 import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';
-import type { FC } from 'react';
+import type { ComponentProps, FC } from 'react';
 import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 
-function KolButtonWrapper({ _on, ...other }: ButtonProps) {
-	const { dummyClickEventHandler } = useToasterService();
+type KolButtonProps = ComponentProps<typeof KolButton>;
 
+function KolButtonWrapper(props: KolButtonProps) {
+	const { dummyClickEventHandler } = useToasterService();
 	const dummyEventHandler = {
 		onClick: dummyClickEventHandler,
 	};
-
-	return <KolButton {...other} _on={dummyEventHandler} />;
+	return <KolButton {...props} _on={dummyEventHandler} />;
 }
 
 const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {

package/src/react.main.tsx

@@ -5,7 +5,7 @@ import { HashRouter as Router } from 'react-router-dom';
 
 import { bootstrap, KoliBriDevHelper } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/loader';
-import { DEFAULT, ECL_EC, ECL_EU } from '@public-ui/themes';
+import { DEFAULT, ECL_EC, ECL_EU, KERN_V2 } from '@public-ui/themes';
 
 import { App } from './App';
 
@@ -40,7 +40,7 @@ const getThemes = async () => {
 	}
 
 	/* List of regular sample app themes */
-	return [DEFAULT, ECL_EC, ECL_EU] as Theme[];
+	return [DEFAULT, ECL_EC, ECL_EU, KERN_V2] as Theme[];
 };
 
 void (async () => {