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

package/src/components/details/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolDetails } from '@public-ui/react';
+import { KolDetails } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/drawer/basic.tsx

@@ -1,60 +1,62 @@
 import type { FC } from 'react';
-import React, { useRef, useState, useContext, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { HideMenusContext } from '../../shares/HideMenusContext';
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton, KolBadge } from '@public-ui/react';
+import { KolDrawer, KolButton, KolInputCheckbox } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';
-
 export const DrawerBasic: FC = () => {
 	const [searchParams] = useSearchParams();
 	const defaultAlign = searchParams.get('align') as AlignPropType;
-	const hideMenus = useContext(HideMenusContext);
+	const defaultCloser = searchParams.get('closer') === 'true';
 	const drawerElement = useRef<HTMLKolDrawerElement>(null);
-	const drawerModalElement = useRef<HTMLKolDrawerElement>(null);
+
 	const [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');
+	const [hasCloser, setHasCloser] = useState<boolean>(defaultCloser);
+
 	useEffect(() => {
 		if (defaultAlign) {
-			drawerModalElement.current?.open();
+			drawerElement.current?.open();
 		}
 	}, [defaultAlign]);
 	return (
 		<>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 			<SampleDescription>
-				<p>
-					KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments and the modal- and
-					non-modal modes.
-				</p>
+				<p>KolDrawer shows a dialog attached to one of the sides of the viewport, when opened. This sample illustrates the four alignments.</p>
 			</SampleDescription>
 
 			<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
+
+			<KolInputCheckbox
+				_label="Drawer has closer"
+				className="mb-4"
+				_checked={hasCloser}
+				_on={{
+					onInput: (_, value) => {
+						setHasCloser((value as null | boolean) === true);
+					},
+				}}
+			/>
+
 			<div className="flex flex-wrap gap-4">
-				<KolDrawer ref={drawerElement} _label="I am a drawer" _align={align} _on={{ onClose: () => console.log('Drawer onClose triggered!') }}>
-					<p>
-						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-						voluptua.
-					</p>
-					<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
-				</KolDrawer>
-				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
 				<KolDrawer
-					ref={drawerModalElement}
-					_modal
+					ref={drawerElement}
+					_label="I am a drawer"
 					_align={align}
-					_label="I am a Drawer Modal"
-					_on={{ onClose: () => console.log('Drawer Modal onClose triggered!') }}
+					_hasCloser={hasCloser}
+					_on={{ onClose: () => console.log('Drawer onClose triggered!') }}
 				>
-					<p>
-						Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-						voluptua.
-					</p>
-					<KolButton _label="Close drawer modal" _on={{ onClick: () => drawerModalElement.current?.close() }} />
+					<div className={align === 'left' || align === 'right' ? 'drawer-content-vertical' : ''}>
+						<p className="mt-0">
+							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+							voluptua.
+						</p>
+						<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+					</div>
 				</KolDrawer>
-				<KolButton _label="Open drawer as modal" _on={{ onClick: () => drawerModalElement.current?.open() }} />
+				<KolButton _label="Open drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
 			</div>
 		</>
 	);

package/src/components/drawer/controlled.tsx

@@ -1,10 +1,9 @@
 import type { FC } from 'react';
-import React, { useState, useContext } from 'react';
+import React, { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
-import { HideMenusContext } from '../../shares/HideMenusContext';
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton, KolBadge } from '@public-ui/react';
+import { KolDrawer, KolButton } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';
@@ -12,13 +11,10 @@ import { DrawerRadioAlign } from './partials/align';
 export const DrawerControlled: FC = () => {
 	const [searchParams] = useSearchParams();
 	const defaultAlign = searchParams.get('align') as AlignPropType;
-	const hideMenus = useContext(HideMenusContext);
 	const [open, setOpen] = useState(false);
-	const [modalOpen, setModalOpen] = useState(false);
 	const [align, setAlign] = useState<AlignPropType>(defaultAlign || 'left');
 	return (
 		<div>
-			{!hideMenus && <KolBadge className="block mb-3" _label="Component is a DRAFT - Don't use in production yet." _color="#db5461" />}
 			<SampleDescription>
 				<p>
 					This sample shows the KolDrawer controlled by the property <code>_open</code> instead of methods.
@@ -34,13 +30,6 @@ export const DrawerControlled: FC = () => {
 					</div>
 				</KolDrawer>
 				<KolButton _label="Open drawer" _on={{ onClick: () => setOpen(true) }} />
-				<KolDrawer _open={modalOpen} _modal _align={align} _label="I'm a controlled modal drawer" _on={{ onClose: () => setModalOpen(false) }}>
-					<div>
-						<p>Lorem ipsum dolor sit amet,</p>
-						<KolButton _label="Close drawer" _on={{ onClick: () => setModalOpen(false) }} />
-					</div>
-				</KolDrawer>
-				<KolButton _label="Open drawer as modal" _on={{ onClick: () => setModalOpen(true) }} />
 			</div>
 		</div>
 	);

package/src/components/drawer/partials/align.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 
-import { KolInputRadio } from '@public-ui/react';
+import { KolInputRadio } from '@public-ui/react-v19';
 
 import type { AlignPropType } from '@public-ui/components';
 

package/src/components/drawer/routes.ts

@@ -1,10 +1,12 @@
 import { Routes } from '../../shares/types';
 import { DrawerBasic } from './basic';
 import { DrawerControlled } from './controlled';
+import { DrawerScrolled } from './scrolled';
 
 export const DRAWER_ROUTES: Routes = {
 	drawer: {
 		basic: DrawerBasic,
 		controlled: DrawerControlled,
+		scrolled: DrawerScrolled,
 	},
 };

package/src/components/drawer/scrolled.tsx

@@ -0,0 +1,133 @@
+// DrawerScrolled Class
+
+import type { AlignPropType } from '@public-ui/components';
+import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React, { useRef, useState } from 'react';
+import { SampleDescription } from '../SampleDescription';
+import { DrawerRadioAlign } from './partials/align';
+
+export const DrawerScrolled: FC = () => {
+	const drawerElement = useRef<HTMLKolDrawerElement>(null);
+	const [align, setAlign] = useState<AlignPropType>('bottom');
+	const [useOverflowHandling, setUseOverflowHandling] = useState(true);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					This sample demonstrates how KolDrawer handles content that exceeds the drawer dimensions and shows the correct way to handle overflow. Use the
+					&#34;Enable Overflow Handling&#34; toggle to see the difference between problematic behavior (content exceeding drawer bounds) and the proper solution
+					(overflow handling within the slot content).
+				</p>
+			</SampleDescription>
+
+			<div className="flex flex-col gap-4 mb-4">
+				<DrawerRadioAlign value={align} onChange={(_, value) => setAlign(value as AlignPropType)} />
+				<KolInputCheckbox
+					_label="Enable Overflow Handling (Recommended)"
+					_checked={useOverflowHandling}
+					_on={{ onChange: (_, value) => setUseOverflowHandling(!!value) }}
+				/>
+			</div>
+			<div className="flex flex-wrap gap-4">
+				<KolDrawer ref={drawerElement} _label="Scrollable Drawer" _align={align}>
+					{useOverflowHandling ? (
+						// ✅ Correct approach: Outer container with fixed dimensions and overflow handling
+						<div
+							style={{
+								width: align === 'left' || align === 'right' ? '90vw' : undefined,
+								height: align === 'top' || align === 'bottom' ? '90vh' : undefined,
+								overflow: 'auto',
+								padding: '0',
+								border: '1px solid #999',
+							}}
+						>
+							<div
+								style={{
+									width: align === 'left' || align === 'right' ? '150vw' : undefined,
+									height: align === 'top' || align === 'bottom' ? '150vh' : undefined,
+									background:
+										'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',
+									backgroundSize: '20px 20px',
+									backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+									border: '2px dashed #ccc',
+									padding: '20px',
+									display: 'flex',
+									flexDirection: 'column',
+									gap: '20px',
+								}}
+							>
+								<p>✅ Content with proper overflow handling - scrollable within drawer bounds</p>
+								<div>
+									<h3>Large Content Area (Scrollable)</h3>
+									<p>
+										Container: {align === 'left' || align === 'right' ? '400px wide' : '90vw wide'} ×{' '}
+										{align === 'top' || align === 'bottom' ? '90vh high' : '400px high'}
+									</p>
+									<p>
+										Content: {align === 'left' || align === 'right' ? '150vw wide' : '400px wide'} ×{' '}
+										{align === 'top' || align === 'bottom' ? '150vh high' : '400px high'}
+									</p>
+									<p>
+										<strong>Overflow Handling:</strong> Enabled - Container has fixed size with overflow: auto
+									</p>
+									<p>
+										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.
+									</p>
+									<p>
+										With overflow handling enabled, this content scrolls properly within the drawer container. You can scroll horizontally/vertically to see all
+										content.
+									</p>
+									<div style={{ marginTop: 'auto', paddingTop: '40px' }}>
+										<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+									</div>
+								</div>
+							</div>
+						</div>
+					) : (
+						// ❌ Problematic approach: Content directly exceeds drawer bounds
+						<div
+							style={{
+								width: align === 'left' || align === 'right' ? '150vw' : '400px',
+								height: align === 'top' || align === 'bottom' ? '150vh' : '400px',
+								background:
+									'linear-gradient(45deg, #f0f0f0 25%, transparent 25%), linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #f0f0f0 75%), linear-gradient(-45deg, transparent 75%, #f0f0f0 75%)',
+								backgroundSize: '20px 20px',
+								backgroundPosition: '0 0, 0 10px, 10px -10px, -10px 0px',
+								border: '2px dashed #ccc',
+								padding: '20px',
+								display: 'flex',
+								flexDirection: 'column',
+								gap: '20px',
+							}}
+						>
+							<p>❌ Content exceeding drawer bounds - problematic behavior</p>
+							<div>
+								<h3>Large Content Area</h3>
+								<p>Width: {align === 'left' || align === 'right' ? '150vw (exceeds drawer width)' : '400px'}</p>
+								<p>Height: {align === 'top' || align === 'bottom' ? '150vh (exceeds drawer height)' : '400px'}</p>
+								<p>
+									<strong>Overflow Handling:</strong> Disabled - Content extends beyond drawer boundaries
+								</p>
+								<p>
+									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.
+								</p>
+								<p>Without overflow handling, this content may extend beyond the drawer boundaries, causing layout issues.</p>
+								<div style={{ marginTop: 'auto', paddingTop: '40px' }}>
+									<KolButton _label="Close drawer" _on={{ onClick: () => drawerElement.current?.close() }} />
+								</div>
+							</div>
+						</div>
+					)}
+				</KolDrawer>
+
+				<KolButton _label="Open scrollable drawer" _on={{ onClick: () => drawerElement.current?.open() }} />
+			</div>
+		</>
+	);
+};

package/src/components/form/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolForm, KolInputText } from '@public-ui/react';
+import { KolForm, KolInputText } from '@public-ui/react-v19';
 
 export const FormBasic: FC = () => (
 	<>

package/src/components/form/error-list.tsx

@@ -1,28 +1,70 @@
+import { KolButton, KolForm, KolInputText } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolForm, KolInputText } from '@public-ui/react';
 
-export const FormErrorList: FC = () => (
-	<>
-		<SampleDescription>
-			<p>This sample shows a form with error messages.</p>
-		</SampleDescription>
+export const FormErrorList: FC = () => {
+	const formRef = useRef<HTMLKolFormElement | null>(null);
 
-		<KolForm
-			className="w-full"
-			_errorList={[
-				{
-					message: 'Error in Input 2',
-					selector: '#input2',
-				},
-			]}
-		>
-			<div className="grid gap-2">
-				<KolInputText id="input1" _label="Input 1" />
-				<KolInputText id="input2" _label="Input 2" _touched _msg={{ _description: 'Input error', _type: 'error' }} />
-				<KolInputText id="input3" _label="Input 3" />
-			</div>
-		</KolForm>
-	</>
-);
+	const scrollTo = () => {
+		formRef.current?.focusErrorList();
+	};
+
+	/**
+	 * Simulate the form submission
+	 */
+	useEffect(() => {
+		formRef.current?.focusErrorList();
+	}, []);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows a form with error messages.</p>
+			</SampleDescription>
+
+			<KolForm
+				className="w-full"
+				ref={formRef}
+				_on={{
+					onSubmit: scrollTo,
+				}}
+				_errorList={[
+					{
+						message: 'Error in Input 2',
+						selector: '#input2',
+					},
+					{
+						message: 'Error in Input 3',
+						selector: () => alert('Error in Input 3'),
+					},
+				]}
+			>
+				<div className="grid gap-2">
+					<KolInputText id="input1" _label="Input 1" />
+					<KolInputText
+						id="input2"
+						_label="Input 2"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<KolInputText
+						id="input3"
+						_label="Input 3"
+						_touched
+						_msg={{
+							_description: 'Input error',
+							_type: 'error',
+						}}
+					/>
+					<div>
+						<KolButton _label="ScrollTo" _type="submit" />
+					</div>
+				</div>
+			</KolForm>
+		</>
+	);
+};

package/src/components/handout/basic.tsx

@@ -29,11 +29,11 @@ import {
 	KolNav,
 	KolProgress,
 	KolSelect,
-	KolTable,
+	KolTableStateful,
 	KolTabs,
 	KolTextarea,
 	KolVersion,
-} from '@public-ui/react';
+} from '@public-ui/react-v19';
 
 import { getTheme, getThemeName } from '../../shares/store';
 import { getRoot } from '../../shares/react-roots';
@@ -53,11 +53,6 @@ function KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<strin
 const TABLE_HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{
-				label: '',
-				rowSpan: 2,
-				asTd: true,
-			},
 			{
 				label: 'Workdays',
 				colSpan: 5,
@@ -76,18 +71,16 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					renderElement.setAttribute('role', 'presentation');
 					el.innerHTML = '';
 					el.appendChild(renderElement);
-					getRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} data-theme="default" />);
+					getRoot(renderElement).render(<KolButtonWrapper _label={cell.label} style={{ fontSize: '75%' }} />);
 				},
-				sort: (data) => {
-					return data.sort((first, second) => {
-						if ((first as TableDataType).monday < (second as TableDataType).monday) {
-							return -1;
-						}
-						if ((first as TableDataType).monday > (second as TableDataType).monday) {
-							return 1;
-						}
-						return 0;
-					});
+				compareFn: (first, second) => {
+					if ((first as TableDataType).monday < (second as TableDataType).monday) {
+						return -1;
+					}
+					if ((first as TableDataType).monday > (second as TableDataType).monday) {
+						return 1;
+					}
+					return 0;
 				},
 				sortDirection: 'ASC',
 				textAlign: 'right',
@@ -102,16 +95,14 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
 				},
-				sort: (data) => {
-					return data.sort((first, second) => {
-						if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
-							return -1;
-						}
-						if ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {
-							return 1;
-						}
-						return 0;
-					});
+				compareFn: (first, second) => {
+					if ((first as TableDataType).tuesday < (second as TableDataType).tuesday) {
+						return -1;
+					}
+					if ((first as TableDataType).tuesday > (second as TableDataType).tuesday) {
+						return 1;
+					}
+					return 0;
 				},
 				sortDirection: 'DESC',
 			},
@@ -199,7 +190,7 @@ export const HandoutBasic: FC = () => {
 
 	return (
 		<div className="grid gap-4">
-			<div className="grid gap-4 grid-cols-[auto_1fr_1fr] items-center">
+			<div className="grid gap-4 md:grid-cols-[auto_1fr_1fr] items-center">
 				<KolKolibri className="block w-75px" _labeled={false}></KolKolibri>
 				<KolHeading _label="" _level={1}>
 					<span slot="expert">
@@ -257,10 +248,8 @@ export const HandoutBasic: FC = () => {
 						<p>
 							I am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.
 						</p>
-						<div className="grid grid-cols-2 items-center">
-							<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
-							<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
-						</div>
+						<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
+						<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
 					</div>
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-6 xl:col-span-3" _label="Button, LinkButton and Tab" _level={2}>
@@ -435,7 +424,6 @@ export const HandoutBasic: FC = () => {
 							/>
 						</div>
 						{/* <KolSkipNav></KolSkipNav> */}
-						{/* <KolLinkGroup _label=""></KolLinkGroup> */}
 						<div>
 							<KolBreadcrumb
 								_label="Breadcrumb aus Text-Links"
@@ -453,7 +441,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Input" _level={2}>
 					<KolForm slot="">
-						<div className="grid gap-4 grid-cols-3 p-2">
+						<div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 p-2">
 							<KolInputColor _label={`Color`} />
 							<KolInputFile _label={`Upload file`} />
 							<KolInputNumber _label={`Number input`} />
@@ -472,7 +460,9 @@ export const HandoutBasic: FC = () => {
 							<div className="grid gap-4">
 								<KolInputRadio _orientation="horizontal" _options="[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]" _value="0" _label={`Salutation`} />
 								<KolInputCheckbox _label="">
-									I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									<span slot="expert">
+										I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+									</span>
 								</KolInputCheckbox>
 							</div>
 							<KolTextarea _rows={4} _label={`Textarea`} />
@@ -481,7 +471,7 @@ export const HandoutBasic: FC = () => {
 				</KolCard>
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-4 xl:col-span-5" _label="Table with Pagination" _level={2}>
 					<div slot="" className="grid gap-2 p-2">
-						<KolTable _label="Table" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTable>
+						<KolTableStateful _label="Table" _minWidth="auto" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>

package/src/components/heading/badged.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolBadge, KolHeading } from '@public-ui/react';
+import { KolBadge, KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/heading/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolHeading } from '@public-ui/react';
+import { KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/heading/paragraph.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolHeading } from '@public-ui/react';
+import { KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';

package/src/components/heading/routes.ts

@@ -2,11 +2,13 @@ import { Routes } from '../../shares/types';
 import { HeadingBadged } from './badged';
 import { HeadingBasic } from './basic';
 import { HeadingParagraph } from './paragraph';
+import { HeadingSecondary } from './secondary';
 
 export const HEADING_ROUTES: Routes = {
 	heading: {
 		basic: HeadingBasic,
 		badge: HeadingBadged,
 		paragraph: HeadingParagraph,
+		secondary: HeadingSecondary,
 	},
 };

package/src/components/heading/secondary.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { KolHeading } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const HeadingSecondary: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				This sample shows KolHeading with the prop <code>_secondaryHeadline</code> in use.
+			</p>
+		</SampleDescription>
+
+		<div className="grid gap-4">
+			<KolHeading _label="This is a H1 headline" _secondaryHeadline="This is a secondary headline" _level={1} />
+		</div>
+	</>
+);

package/src/components/icon/basic.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { KolIcon } from '@public-ui/react';
+import { KolIcon } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
 import { SampleDescription } from '../SampleDescription';
@@ -12,8 +12,9 @@ export const IconBasic: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolIcon _label="" _icons="codicon codicon-home" />
+			<KolIcon className="block w-[1em] h-[1em]" _label="" _icons="codicon codicon-home" />
 			<KolIcon
+				className="block w-[1em] h-[1em]"
 				style={{
 					color: 'red',
 				}}

package/src/components/image/basic.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import React from 'react';
 import { SampleDescription } from '../SampleDescription';
-import { KolImage } from '@public-ui/react';
+import { KolImage } from '@public-ui/react-v19';
 
 export const ImageBasic: FC = () => (
 	<>
@@ -9,6 +9,6 @@ export const ImageBasic: FC = () => (
 			<p>KolImage renders an image. The sample shows an image with alternative text.</p>
 		</SampleDescription>
 
-		<KolImage className="w-80%" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
+		<KolImage className="w-image" _src="abgrenzung.jpg" _alt="Darstellung des KoliBri-Theming" />
 	</>
 );

package/src/components/input-checkbox/basic.tsx

@@ -11,6 +11,6 @@ export const InputCheckboxBasic: FC = () => (
 			<p>KolInputCheckbox renders a checkbox. The sample shows KolInputCheckbox in a form context with all variations and states.</p>
 		</SampleDescription>
 
-		<FormWrap RefComponent={InputCheckboxVariants} />
+		<FormWrap RefComponent={InputCheckboxVariants} showButtons={false} />
 	</>
 );