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

package/src/scenarios/react-hook-form/basic.tsx

@@ -0,0 +1,183 @@
+import type { FC } from 'react';
+import React from 'react';
+import type { SubmitHandler, FieldErrors } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import {
+	KolInputTextController,
+	KolInputPasswordController,
+	KolInputEmailController,
+	KolInputNumberController,
+	KolInputRangeController,
+	KolInputDateController,
+	KolInputColorController,
+	KolInputFileController,
+	KolTextareaController,
+	KolComboboxController,
+	KolSelectController,
+	KolSingleSelectController,
+	KolInputRadioController,
+	KolInputCheckboxController,
+} from '@public-ui/react-hook-form-adapter';
+import { KolButton } from '@public-ui/react-v19';
+
+import { SampleDescription } from '../../components/SampleDescription';
+import { COUNTRY_SUGGESTIONS } from '../../shares/country';
+
+interface FormData {
+	firstName: string;
+	lastName: string;
+	email: string;
+	password: string;
+	age: number;
+	volume: number;
+	birthday: string;
+	favoriteColor: string;
+	cv: FileList | null;
+	bio: string;
+	country: string;
+	language: string;
+	framework: string;
+	gender: string;
+	termsAccepted: boolean;
+}
+
+const defaultValues: FormData = {
+	firstName: '',
+	lastName: '',
+	email: '',
+	password: '',
+	age: 18,
+	volume: 50,
+	birthday: '',
+	favoriteColor: '#000000',
+	cv: null,
+	bio: '',
+	country: '',
+	language: 'de',
+	framework: '',
+	gender: '',
+	termsAccepted: false,
+};
+
+const languageOptions = [
+	{ label: 'English', value: 'en' },
+	{ label: 'German', value: 'de' },
+	{ label: 'French', value: 'fr' },
+];
+
+const frameworkOptions = [
+	{ label: 'React', value: 'react' },
+	{ label: 'Vue', value: 'vue' },
+	{ label: 'Stencil', value: 'stencil' },
+];
+
+const genderOptions = [
+	{ label: 'Male', value: 'male' },
+	{ label: 'Female', value: 'female' },
+	{ label: 'Other', value: 'other' },
+];
+
+const allFields: Array<keyof FormData> = [
+	'firstName',
+	'lastName',
+	'email',
+	'password',
+	'age',
+	'volume',
+	'birthday',
+	'favoriteColor',
+	'cv',
+	'bio',
+	'country',
+	'language',
+	'framework',
+	'gender',
+	'termsAccepted',
+];
+
+export const RHFBasic: FC = () => {
+	const { control, handleSubmit, setValue, getValues, trigger } = useForm<FormData>({
+		defaultValues,
+		mode: 'onTouched',
+		shouldFocusError: true,
+	});
+
+	const touchAndValidateAll = () => {
+		allFields.forEach((name) => {
+			setValue(name, getValues(name), { shouldTouch: true, shouldValidate: true });
+		});
+	};
+
+	const onSubmit: SubmitHandler<FormData> = (data) => {
+		alert(JSON.stringify(data, null, 2));
+	};
+
+	const onError = (errors: FieldErrors<FormData>) => {
+		touchAndValidateAll();
+		void trigger(undefined, { shouldFocus: true });
+
+		console.warn('Validation errors:', errors);
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample demonstrates a form using React Hook Form with KoliBri adapters. All inputs are validated, and error messages are shown on submit.</p>
+			</SampleDescription>
+
+			<form onSubmit={handleSubmit(onSubmit, onError)} className="grid gap-4 w-full max-w-xl">
+				<KolInputTextController name="firstName" control={control} _label="First Name" rules={{ required: 'First name is required' }} _required />
+				<KolInputTextController name="lastName" control={control} _label="Last Name" rules={{ required: 'Last name is required' }} _required />
+				<KolInputEmailController name="email" control={control} _label="Email" rules={{ required: 'Email is required' }} _required />
+				<KolInputPasswordController name="password" control={control} _label="Password" rules={{ required: 'Password is required' }} _required />
+				<KolInputNumberController name="age" control={control} _label="Age" rules={{ required: 'Age is required', min: 0 }} _required />
+				<KolInputRangeController name="volume" control={control} _label="Volume (0–100)" _min={0} _max={100} />
+				<KolInputDateController name="birthday" control={control} _label="Birthday" rules={{ required: 'Birthday is required' }} />
+				<KolInputColorController name="favoriteColor" control={control} _label="Favorite Color" id="favoriteColor" />
+				<KolInputFileController name="cv" control={control} _label="Upload CV" rules={{ required: 'Please upload your CV' }} _required />
+				<KolTextareaController name="bio" control={control} _label="Bio" rules={{ required: 'Please provide a short bio' }} _required />
+				<KolComboboxController
+					control={control}
+					rules={{ required: 'Please select a country' }}
+					name="country"
+					_label="Country"
+					_suggestions={COUNTRY_SUGGESTIONS}
+					_required
+				/>
+				<KolSelectController
+					control={control}
+					rules={{ required: 'Please select a language' }}
+					name="language"
+					_label="Preferred Language"
+					_options={languageOptions}
+					_required
+				/>
+				<KolSingleSelectController
+					rules={{ required: 'Please select a framework' }}
+					control={control}
+					name="framework"
+					_label="Favorite Framework"
+					_options={frameworkOptions}
+					_required
+				/>
+				<KolInputRadioController
+					control={control}
+					rules={{ required: 'Please select your gender' }}
+					name="gender"
+					_label="Gender"
+					_options={genderOptions}
+					_required
+				/>
+				<KolInputCheckboxController
+					name="termsAccepted"
+					control={control}
+					_label="I accept the terms and conditions"
+					rules={{ required: 'You must accept the terms' }}
+					_required
+				/>
+
+				<KolButton _label="Submit" _type="submit" />
+			</form>
+		</>
+	);
+};

package/src/scenarios/routes.ts

@@ -1,24 +1,34 @@
 import { Routes } from '../shares/types';
-import { AppointmentForm } from './appointment-form/AppointmentForm';
+import { ChangeTabindex } from './change-tabindex';
 import { CustomTooltipWidth } from './custom-tooltip-width';
 import { DisabledInteractiveElements } from './disabled-interactive-elements';
+import { FocusElements } from './focus-elements';
+import { InputGroupWithError } from './input-group-with-error';
 import { InputsGetValue } from './inputs-get-value';
+import { PerformanceTest } from './performance-test';
+import { SameHeightOfAllInteractiveElements } from './same-height-of-all-interactive-elements';
 import { StaticForm } from './static-form';
-import { FocusElements } from './focus-elements';
+import { SampleFormWithValidation } from './sample-form-with-validation';
 import { TableHorizontalScrollAdvanced } from './horizontal-scrollbar-advanced';
-import { InputGroupWithError } from './input-group-with-error';
-import { ChangeTabindex } from './change-tabindex';
+import { ToolbarItemOrder } from './toolbar-item-order';
+import { TooltipPositioning } from './tooltip-positioning';
+import { RHFBasic } from './react-hook-form/basic';
 
 export const SCENARIO_ROUTES: Routes = {
 	scenarios: {
-		'appointment-form': AppointmentForm,
+		'change-tabindex': ChangeTabindex,
 		'custom-tooltip-width': CustomTooltipWidth,
 		'disabled-interactive-scenario': DisabledInteractiveElements,
 		'focus-elements': FocusElements,
 		'input-group-with-error': InputGroupWithError,
 		'inputs-get-value': InputsGetValue,
+		'react-hook-form-adapter': RHFBasic,
+		'same-height-of-all-interactive-elements': SameHeightOfAllInteractiveElements,
 		'static-form': StaticForm,
+		'sample-form-with-validation': SampleFormWithValidation,
 		'table-horizontal-scrollbar-advanced': TableHorizontalScrollAdvanced,
-		'change-tabindex': ChangeTabindex,
+		'toolbar-item-order': ToolbarItemOrder,
+		'tooltip-positioning': TooltipPositioning,
+		'performance-test': PerformanceTest,
 	},
 };

package/src/scenarios/same-height-of-all-interactive-elements.tsx

@@ -0,0 +1,62 @@
+import {
+	KolButton,
+	KolCombobox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputFile,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRange,
+	KolInputText,
+	KolLinkButton,
+	KolSelect,
+	KolSingleSelect,
+	KolTextarea,
+} from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../components/SampleDescription';
+import { useToasterService } from '../hooks/useToasterService';
+
+export const SameHeightOfAllInteractiveElements: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					All interactive elements, such as buttons and input fields, should have the same height to ensure a consistent and visually balanced user interface.
+				</p>
+			</SampleDescription>
+			<div className="w-full flex flex-wrap gap-4">
+				<KolButton _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
+				<KolButton _hideLabel _icons="codicon codicon-home" _label="Button" _on={dummyEventHandler} />
+				<KolLinkButton _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
+				<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Link-Button" _on={dummyEventHandler} />
+				<KolCombobox _hideLabel _icons="codicon codicon-home" _label="Combobox" _suggestions={[]} />
+				<KolInputColor
+					_hideLabel
+					_icons={{
+						left: 'codicon codicon-home',
+					}}
+					_label="Input-Color"
+				/>
+				<KolInputFile _hideLabel _icons="codicon codicon-home" _label="Input-File" />
+				<KolInputDate _hideLabel _icons="codicon codicon-home" _label="Input-Date" />
+				<KolInputEmail _hideLabel _icons="codicon codicon-home" _label="Input-Email" />
+				<KolInputNumber _hideLabel _icons="codicon codicon-home" _label="Input-Number" />
+				<KolInputPassword _hideLabel _icons="codicon codicon-home" _label="Input-Password" />
+				<KolInputRange _hideLabel _icons="codicon codicon-home" _label="Input-Range" />
+				<KolInputText _hideLabel _icons="codicon codicon-home" _label="Input-Text" />
+				<KolSelect _hideLabel _icons="codicon codicon-home" _label="Combobox" _options={[]} />
+				<KolSingleSelect _hideLabel _icons="codicon codicon-home" _label="Combobox" _options={[]} />
+				<KolTextarea _hideLabel _icons="codicon codicon-home" _label="Combobox" />
+			</div>
+		</>
+	);
+};

package/src/scenarios/sample-form-with-validation.tsx

@@ -0,0 +1,192 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import type { FieldError } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+
+import {
+	KolInputCheckbox,
+	KolInputColor,
+	KolInputDate,
+	KolInputEmail,
+	KolInputNumber,
+	KolInputPassword,
+	KolInputRadio,
+	KolInputRange,
+	KolInputText,
+	KolSelect,
+	KolSingleSelect,
+	KolCombobox,
+	KolTextarea,
+	KolButton,
+	KolHeading,
+	KolAlert,
+	KolLink,
+} from '@public-ui/react-v19';
+
+import { SampleDescription } from '../components/SampleDescription';
+import { COUNTRY_SUGGESTIONS } from '../shares/country';
+import { useToasterService } from '../hooks/useToasterService';
+
+const formSchema = z.object({
+	date: z.preprocess(
+		(val) => (typeof val === 'string' || val instanceof Date ? new Date(val) : undefined),
+		z.date({ message: 'Date is required' }).refine((d) => !isNaN(d.getTime()), { message: 'Invalid date' }),
+	),
+
+	text: z.string({ message: 'Please enter text.' }).min(10, 'Text must be at least 10 characters long.'),
+	email: z.string({ message: 'Please enter your email.' }).min(1, 'Please enter your email.').email('Invalid email address.'),
+	password: z
+		.string({ message: 'Please enter a password.' })
+		.min(8, 'Password must be at least 8 characters.')
+		.regex(/[A-Z]/, 'Password must include at least one uppercase letter.')
+		.regex(/[0-9]/, 'Password must include at least one number.'),
+	range: z.number({ message: 'Please select a range.' }).min(30, 'Minimum value is 30.'),
+	number: z.number({ message: 'Please enter a number.' }).min(1, 'Minimum is 1.').max(10, 'Maximum is 10.'),
+	checkbox: z.boolean().refine((val: boolean) => val === true, {
+		message: 'You must accept the terms and conditions.',
+	}),
+
+	radio: z.string({ message: 'Please select a gender.' }).min(1, 'Please select a gender.'),
+	color: z.string({ message: 'Please select a color.' }).min(1, 'Please select a color.'),
+	select: z.string({ message: 'Please select a value.' }).min(1, 'Please select a value.'),
+	singleSelect: z.string({ message: 'Please select a single option.' }).min(1, 'Please select a single option.'),
+	combobox: z.string({ message: 'Please select a country.' }).min(1, 'Please select a country.'),
+	textarea: z.string({ message: 'Please enter a message.' }).min(1, 'Please enter a message.'),
+});
+
+export const SampleFormWithValidation: React.FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+	const {
+		handleSubmit,
+		formState: { errors, touchedFields },
+		reset,
+		setValue,
+		trigger,
+		watch,
+	} = useForm({
+		mode: 'onBlur',
+		reValidateMode: 'onChange',
+		resolver: zodResolver(formSchema),
+		defaultValues: {
+			range: 30,
+			number: 5,
+		},
+	});
+
+	const err = (key: keyof z.infer<typeof formSchema>) => {
+		const fieldError = errors[key];
+
+		if (!fieldError || typeof fieldError !== 'object' || !('message' in fieldError)) {
+			return undefined;
+		}
+
+		return {
+			_description: fieldError.message as string,
+			_type: 'error' as const,
+		};
+	};
+
+	const isTouched = (key: keyof z.infer<typeof formSchema>) => {
+		return !!touchedFields[key];
+	};
+
+	const bind = <K extends keyof z.infer<typeof formSchema>>(key: K) => ({
+		id: `field-${key as string}`,
+		_name: key,
+		_value: watch(key) as z.infer<typeof formSchema>[K],
+		_touched: isTouched(key),
+		_msg: err(key),
+		_on: {
+			onInput: (_: Event, v: unknown) => setValue(key, v as any, { shouldTouch: true, shouldValidate: true }),
+			onBlur: () => trigger(key),
+		},
+	});
+
+	const onReset = () => {
+		reset(undefined, {
+			keepErrors: false,
+			keepTouched: false,
+			keepDirty: false,
+		});
+	};
+
+	const allErrors = Object.entries(errors)
+		.map(([key, value]) => [key, (value as FieldError).message] as const)
+		.filter(([, msg]) => Boolean(msg));
+
+	return (
+		<section className="w-full max-w-3xl mx-auto p-6">
+			<KolHeading _level={2} _label="Sample Form with Validation (Zod)" />
+			<SampleDescription>
+				<p>
+					This example shows validation with <code>react-hook-form</code>, <code>Zod</code>, and an error list.
+				</p>
+			</SampleDescription>
+
+			{allErrors.length > 0 && (
+				<KolAlert _type="error" _label="Please fix the following:" _alert _variant="card">
+					<ul className="list-disc pl-5">
+						{allErrors.map(([key, msg], i) => (
+							<li key={i}>
+								<KolLink
+									_label={msg}
+									_href={`#field-${key}`}
+									_on={{
+										onClick: (e: Event) => {
+											e.preventDefault();
+											const input = document.getElementById(`field-${key}`);
+											input?.focus();
+										},
+									}}
+								/>
+							</li>
+						))}
+					</ul>
+				</KolAlert>
+			)}
+
+			<form onSubmit={handleSubmit(dummyClickEventHandler)} noValidate className="grid gap-4 mt-6">
+				<KolInputDate _label="Date" {...bind('date')} />
+				<KolInputText _label="Text (≥ 10 chars)" {...bind('text')} />
+				<KolInputEmail _label="Email" {...bind('email')} />
+				<KolInputPassword _label="Password" {...bind('password')} />
+				<KolInputRange _label="Range (≥ 30)" _min={0} _max={100} {...bind('range')} />
+				<KolInputNumber _label="Number (1 – 10)" {...bind('number')} />
+				<KolInputCheckbox _label="Accept terms" {...bind('checkbox')} />
+				<KolInputRadio
+					_label="Gender"
+					_options={[
+						{ label: 'Female', value: 'f' },
+						{ label: 'Male', value: 'm' },
+					]}
+					{...bind('radio')}
+				/>
+				<KolInputColor _label="Favorite Color" {...bind('color')} />
+				<KolSelect
+					_label="Select"
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+					{...bind('select')}
+				/>
+				<KolSingleSelect
+					_label="Single Select"
+					_options={[
+						{ label: 'Option A', value: 'A' },
+						{ label: 'Option B', value: 'B' },
+					]}
+					{...bind('singleSelect')}
+				/>
+				<KolCombobox _label="Country" _suggestions={COUNTRY_SUGGESTIONS} {...bind('combobox')} />
+				<KolTextarea _label="Message" _rows={4} {...bind('textarea')} />
+
+				<div className="flex gap-4 mt-4">
+					<KolButton _label="Submit" _type="submit" _variant="primary" />
+					<KolButton _label="Reset" _type="reset" onClick={onReset} />
+				</div>
+			</form>
+		</section>
+	);
+};

package/src/scenarios/static-form.tsx

@@ -15,7 +15,7 @@ import {
 	KolCombobox,
 	KolTextarea,
 	KolHeading,
-} 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/toolbar-item-order.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import type { FC } from 'react';
+import type { ToolbarItemsPropType } from '@public-ui/components';
+import { KolHeading, KolToolbar } from '@public-ui/react-v19';
+
+export const ToolbarItemOrder: FC = () => {
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [isSubmitting2, setIsSubmitting2] = useState(false);
+
+	useEffect(() => {
+		let timer: ReturnType<typeof setTimeout>;
+		if (isSubmitting) {
+			timer = setTimeout(() => {
+				setIsSubmitting(false);
+			}, 2000);
+		}
+		return () => clearTimeout(timer);
+	}, [isSubmitting]);
+
+	useEffect(() => {
+		let timer: ReturnType<typeof setTimeout>;
+		if (isSubmitting2) {
+			timer = setTimeout(() => {
+				setIsSubmitting2(false);
+			}, 2000);
+		}
+		return () => clearTimeout(timer);
+	}, [isSubmitting2]);
+
+	const handleSubmit = () => setIsSubmitting(true);
+	const handleSubmit2 = () => setIsSubmitting2(true);
+
+	const toolbarItems = useMemo(() => {
+		const items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({
+			_label: `Button ${index + 1}`,
+			_on: { onClick: handleSubmit },
+			_icons: isSubmitting ? 'codicon codicon-loading codicon-modifier-spin' : void 0,
+			_disabled: isSubmitting,
+		}));
+		return items;
+	}, [isSubmitting]);
+
+	const brokenToolbarItems = useMemo(() => {
+		const items: ToolbarItemsPropType = Array.from({ length: 5 }, (_item, index) => ({
+			_label: `Button ${index + 1}`,
+			_on: { onClick: handleSubmit2 },
+			_disabled: isSubmitting2,
+			_icons: isSubmitting2 ? 'codicon codicon-loading codicon-modifier-spin' : void 0,
+		}));
+		return items;
+	}, [isSubmitting2]);
+
+	return (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+			<KolHeading _label="Disabled Toolbar Buttons Bug (solved)" />
+
+			<KolHeading _label="icon vor disabled" _level={2} />
+			<KolToolbar _label="KolToolbar A" _items={toolbarItems} />
+			<KolHeading _label="disabled vor icon" _level={2} />
+			<p>Klicke auf einen der {brokenToolbarItems.length - 1} ersten Buttons hatte zur Folge, dass die nachfolgenden Buttons kaputt gehen.</p>
+			<KolToolbar _label="KolToolbar B" _items={brokenToolbarItems} />
+		</div>
+	);
+};

package/src/scenarios/tooltip-positioning.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react';
+import React from 'react';
+import { KolPopoverButton } from '@public-ui/react-v19';
+import { SampleDescription } from '../components/SampleDescription';
+
+export const TooltipPositioning: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This example demonstrates tooltip positioning within container query contexts. Container queries can interfere with fixed positioning, causing
+					tooltips to render incorrectly relative to the viewport. The layout containment fix ensures tooltips position properly even when their parent elements
+					use container-based sizing and layout rules.
+				</p>
+			</SampleDescription>
+
+			<div
+				style={{
+					container: 'test / size',
+					contain: 'layout',
+				}}
+			>
+				<KolPopoverButton _label="Sample PopoverButton—Click for Popover" _icons="codicon codicon-info" _tooltipAlign="right" _hideLabel>
+					This is an explanation shown on click.
+				</KolPopoverButton>
+			</div>
+		</>
+	);
+};

package/src/shares/longOptions.ts

@@ -0,0 +1,15 @@
+export const LONG_OPTIONS = [
+	{ value: '1', label: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam' },
+	{ value: '2', label: 'Lorem ipsum dolor' },
+	{
+		value: '3',
+		label:
+			'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+	},
+	{ value: '4', label: 'Lorem ipsum dolor' },
+	{ value: '5', label: 'Lorem ipsum dolor' },
+	{ value: '6', label: 'Lorem ipsum dolor' },
+	{ value: '7', label: 'Lorem ipsum dolor' },
+	{ value: '8', label: 'Lorem ipsum dolor' },
+	{ value: '2', label: 'Lorem ipsum dolor' },
+];

package/src/shares/routes.ts

@@ -4,7 +4,6 @@ import { ALERT_ROUTES } from '../components/alert/routes';
 import { AVATAR_ROUTES } from '../components/avatar/routes';
 import { BADGE_ROUTES } from '../components/badge/routes';
 import { BREADCRUMB_ROUTES } from '../components/breadcrumb/routes';
-import { BUTTON_GROUP_ROUTES } from '../components/button-group/routes';
 import { BUTTON_LINK_ROUTES } from '../components/button-link/routes';
 import { BUTTON_ROUTES } from '../components/button/routes';
 import { CARD_ROUTES } from '../components/card/routes';
@@ -15,7 +14,6 @@ import { HANDOUT_ROUTES } from '../components/handout/routes';
 import { HEADING_ROUTES } from '../components/heading/routes';
 import { ICON_ROUTES } from '../components/icon/routes';
 import { IMAGE_ROUTES } from '../components/image/routes';
-import { INDENTED_ROUTES } from '../components/indented-text/routes';
 import { INPUT_CHECKBOX_ROUTES } from '../components/input-checkbox/routes';
 import { INPUT_COLOR_ROUTES } from '../components/input-color/routes';
 import { INPUT_DATE_ROUTES } from '../components/input-date/routes';
@@ -28,13 +26,14 @@ import { INPUT_RANGE_ROUTES } from '../components/input-range/routes';
 import { INPUT_TEXT_ROUTES } from '../components/input-text/routes';
 import { KOLIBRI_ROUTES } from '../components/kolibri/routes';
 import { LINK_BUTTON_ROUTES } from '../components/link-button/routes';
-import { LINK_GROUP_ROUTES } from '../components/link-group/routes';
 import { LINK_ROUTES } from '../components/link/routes';
 import { MODAL_ROUTES } from '../components/modal/routes';
 import { NAV_ROUTES } from '../components/nav/routes';
 import { PAGINATION_ROUTES } from '../components/pagination/routes';
+import { POPOVER_BUTTON_ROUTES } from '../components/popover-button/routes';
 import { PROGRESS_ROUTES } from '../components/progress/routes';
 import { QUOTE_ROUTES } from '../components/quote/routes';
+import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { SELECT_ROUTES } from '../components/select/routes';
 import { SKIP_NAV_ROUTES } from '../components/skip-nav/routes';
 import { SPIN_ROUTES } from '../components/spin/routes';
@@ -45,7 +44,6 @@ import { TEXTAREA_ROUTES } from '../components/textarea/routes';
 import { TOAST_ROUTES } from '../components/toast/routes';
 import { TOOLBAR_ROUTES } from '../components/toolbar/routes';
 import { VERSION_ROUTES } from '../components/version/routes';
-import { SCENARIO_ROUTES } from '../scenarios/routes';
 import { Routes } from './types';
 import { TREE_ROUTES } from '../components/tree/routes';
 import { COMBOBOX_ROUTES } from '../components/combobox/routes';
@@ -59,7 +57,6 @@ export const ROUTES: Routes = {
 	...AVATAR_ROUTES,
 	...BADGE_ROUTES,
 	...BREADCRUMB_ROUTES,
-	...BUTTON_GROUP_ROUTES,
 	...BUTTON_LINK_ROUTES,
 	...BUTTON_ROUTES,
 	...CARD_ROUTES,
@@ -70,7 +67,6 @@ export const ROUTES: Routes = {
 	...HEADING_ROUTES,
 	...ICON_ROUTES,
 	...IMAGE_ROUTES,
-	...INDENTED_ROUTES,
 	...INPUT_CHECKBOX_ROUTES,
 	...INPUT_COLOR_ROUTES,
 	...INPUT_DATE_ROUTES,
@@ -83,11 +79,11 @@ export const ROUTES: Routes = {
 	...INPUT_TEXT_ROUTES,
 	...KOLIBRI_ROUTES,
 	...LINK_BUTTON_ROUTES,
-	...LINK_GROUP_ROUTES,
 	...LINK_ROUTES,
 	...MODAL_ROUTES,
 	...NAV_ROUTES,
 	...PAGINATION_ROUTES,
+	...POPOVER_BUTTON_ROUTES,
 	...PROGRESS_ROUTES,
 	...QUOTE_ROUTES,
 	...SELECT_ROUTES,