@public-ui/sample-react 4.3.0-rc.3 → 4.3.0-rc.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "4.3.0-rc.3",
+  "version": "4.3.0-rc.5",
   "description": "This app contains samples for the KoliBri/Public UI",
   "type": "module",
   "license": "EUPL-1.2",
@@ -27,9 +27,9 @@
     "typescript": "5.9.3",
     "world_countries_lists": "3.3.0",
     "zod": "4.4.3",
-    "@public-ui/components": "4.3.0-rc.3",
-    "@public-ui/react-v19": "4.3.0-rc.3",
-    "@public-ui/react-hook-form-adapter": "4.3.0-rc.3"
+    "@public-ui/components": "4.3.0-rc.5",
+    "@public-ui/react-hook-form-adapter": "4.3.0-rc.5",
+    "@public-ui/react-v19": "4.3.0-rc.5"
   },
   "devDependencies": {
     "eslint": "9.39.4",
@@ -39,7 +39,7 @@
     "stylelint": "17.13.0"
   },
   "files": [
-    "public",
+    "assets",
     "src",
     "tsconfig.json"
   ],

package/src/components/abbr/basic.tsx

@@ -7,15 +7,11 @@ import type { FC } from 'react';
 export const AbbrBasic: FC = () => (
 	<>
 		<SampleDescription>
-			<p>KolAbbr shows an abbreviation and uses kol-tooltip-wc to display the long form, if provided.</p>
+			<p>KolAbbr shows an abbreviation.</p>
 		</SampleDescription>
 
 		<p>
-			I am <KolAbbr _label="as an example">e.g.</KolAbbr> an abbreviation.
-		</p>
-
-		<p>
-			I am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.
+			I am <KolAbbr>e.g.</KolAbbr> an abbreviation.
 		</p>
 	</>
 );

package/src/components/button/buttons-in-fixed-grid.tsx

@@ -0,0 +1,27 @@
+import { KolButton, KolLinkButton } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
+
+export const ButtonInFixedGrid: FC = () => {
+	const { dummyClickEventHandler } = useToasterService();
+
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+
+	return (
+		<>
+			<SampleDescription>
+				<p>All this buttons are in a grid with fixed height (60px) and width (25% of screen) and should accept this dimensions.</p>
+			</SampleDescription>
+			<div className="grid gap-4 fixed-height-grid">
+				<KolButton _variant="primary" _icons="kolicon-house" _label="Button" _on={dummyEventHandler} />
+				<KolButton _variant="primary" _hideLabel _icons="kolicon-house" _label="Button" _on={dummyEventHandler} />
+				<KolLinkButton _variant="primary" _href="#" _icons="kolicon-house" _label="Link-Button" _on={dummyEventHandler} />
+				<KolLinkButton _variant="primary" _hideLabel _href="#" _icons="kolicon-house" _label="Link-Button" _on={dummyEventHandler} />
+			</div>
+		</>
+	);
+};

package/src/components/button/routes.ts

@@ -3,6 +3,7 @@ import { ButtonAccessKey } from './access-key';
 import { ButtonAriaDescription } from './aria-description';
 import { ButtonBaselined } from './baselined';
 import { ButtonBasic } from './basic';
+import { ButtonInFixedGrid } from './buttons-in-fixed-grid';
 import { ButtonDisabled } from './disabled';
 import { ButtonExpertSlot } from './expert-slot';
 import { ButtonFocusOptions } from './focus-options';
@@ -30,5 +31,6 @@ export const BUTTON_ROUTES: Routes = {
 		'expert-slot': ButtonExpertSlot,
 		'row-reverse-tooltip': ButtonRowReverseTooltip,
 		'focus-options': ButtonFocusOptions,
+		'fixed-grid': ButtonInFixedGrid,
 	},
 };

package/src/components/button/variants.tsx

@@ -1,10 +1,17 @@
 import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { useToasterService } from '../../hooks/useToasterService';
+import { fetchVariantData } from '../../shares/fetchVariantData';
+import { getCustomThemes } from '../../shares/store';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonVariants: FC = () => {
+	const [searchParams] = useSearchParams();
+	const theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;
+	const data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);
+
 	const { dummyClickEventHandler } = useToasterService();
 
 	const dummyEventHandler = {
@@ -14,19 +21,32 @@ export const ButtonVariants: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This story showcases all available button variants: primary, secondary, tertiary, normal, danger, and ghost.</p>
+				<p>
+					This story showcases all available button variants for this theme. You can import <code>ButtonVariantsEnum</code> from your theme to always use the
+					right variants.
+				</p>
 			</SampleDescription>
 
 			<div className="grid gap-8">
 				<section className="grid gap-4">
-					<KolHeading _level={2} _label="All Button Variants" />
-					<div className="flex flex-wrap gap-4">
-						<KolButton _icons="kolicon-house" _label="Primary" _variant="primary" _on={dummyEventHandler} />
-						<KolButton _icons="kolicon-kolibri" _label="Secondary" _variant="secondary" _on={dummyEventHandler} />
-						<KolButton _icons="kolicon-cogwheel" _label="Tertiary" _variant="tertiary" _on={dummyEventHandler} />
-						<KolButton _icons="kolicon-cogwheel" _label="Normal" _variant="normal" _on={dummyEventHandler} />
-						<KolButton _icons="kolicon-alert-warning" _label="Danger" _variant="danger" _on={dummyEventHandler} />
-						<KolButton _icons="kolicon-eye-closed" _label="Ghost" _variant="ghost" _on={dummyEventHandler} />
+					<KolHeading _level={2} _label="All theme exclusive button variants" />
+					<div className="flex flex-wrap gap-4 items-center">
+						{!Array.isArray(data) || data.length === 0 ? (
+							<p>This theme has no variants for this component.</p>
+						) : (
+							data.map((element) => {
+								return <KolButton _icons="kolicon-house" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;
+							})
+						)}
+					</div>
+					<div className="flex flex-wrap gap-4 items-center">
+						{!Array.isArray(data) || data.length === 0 ? (
+							<p>This theme has no variants for this component.</p>
+						) : (
+							data.map((element) => {
+								return <KolButton _hideLabel _icons="kolicon-settings" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />;
+							})
+						)}
 					</div>
 				</section>
 			</div>

package/src/components/dialog/routes.ts

@@ -1,10 +1,12 @@
 import type { Routes } from '../../shares/types';
 import { DialogBasic } from './basic';
+import { DialogScrollLock } from './scroll-lock';
 import { DialogWithAlert } from './with-alert';
 
 export const DIALOG_ROUTES: Routes = {
 	dialog: {
 		basic: DialogBasic,
+		'scroll-lock': DialogScrollLock,
 		'with-alert': DialogWithAlert,
 	},
 };

package/src/components/dialog/scroll-lock.tsx

@@ -0,0 +1,46 @@
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+
+import { KolButton, KolDialog, KolDrawer } from '@public-ui/react-v19';
+import { SampleDescription } from '../SampleDescription';
+
+export const DialogScrollLock: FC = () => {
+	const dialogRef = useRef<HTMLKolDialogElement>(null);
+	const drawerRef = useRef<HTMLKolDrawerElement>(null);
+
+	return (
+		<>
+			<SampleDescription>
+				<p>
+					Demonstrates that opening <strong>KolDialog</strong>/<strong>KolModal</strong> or <strong>KolDrawer</strong> modally locks the background scroll: the
+					page behind the overlay must not scroll, neither via mouse wheel/touch over the backdrop nor by dragging the page scrollbar. Non-modal{' '}
+					<code>show()</code> does not lock.
+				</p>
+				<p>
+					<strong>How to test:</strong> scroll this long page down a bit, open the dialog or drawer below, then try to scroll the background (mouse wheel over
+					the dimmed backdrop, or drag the scrollbar) – it should stay put. Close the overlay again and the page should scroll normally, restored to the same
+					position without a layout shift.
+				</p>
+			</SampleDescription>
+
+			<div className="flex flex-wrap gap-4 mb-4">
+				<KolButton _label="Open modal dialog" _on={{ onClick: () => dialogRef.current?.showModal() }} />
+				<KolButton _label="Open modal drawer" _on={{ onClick: () => drawerRef.current?.showModal() }} />
+			</div>
+
+			<KolDialog ref={dialogRef} _label="Scroll lock dialog" _variant="card" _width="30%">
+				<p className="mt-0">While I am open, the background must not scroll.</p>
+				<KolButton _label="Close" _on={{ onClick: () => dialogRef.current?.closeModal() }} />
+			</KolDialog>
+
+			<KolDrawer ref={drawerRef} _label="Scroll lock drawer" _align="right">
+				<p className="mt-0">While I am open, the background must not scroll.</p>
+				<KolButton _label="Close" _on={{ onClick: () => drawerRef.current?.close() }} />
+			</KolDrawer>
+
+			<div style={{ height: '200vh', flexShrink: 0 }} className="border border-dashed border-gray p-4">
+				<p>This tall block simulates a long page. Scroll down, open an overlay above, and try to scroll here.</p>
+			</div>
+		</>
+	);
+};

package/src/components/handout/basic.tsx

@@ -242,11 +242,7 @@ export const HandoutBasic: FC = () => {
 				<KolCard className="col-span-6 sm:col-span-6 md:col-span-3 xl:col-span-2" _label="Abbreviation and Progress" _level={2}>
 					<div slot="" className="grid gap-2 p-2">
 						<p>
-							I am <KolAbbr _label="as an example">e.g.</KolAbbr> an abbreviation.
-						</p>
-
-						<p>
-							I am <KolAbbr>e.g.</KolAbbr> an abbreviation without label.
+							I am <KolAbbr>e.g.</KolAbbr> an abbreviation.
 						</p>
 						<KolProgress _variant="bar" _max={100} _value={33} _label="Progress" />
 						<KolProgress _variant="cycle" _max={100} _value={66} _label="Progress" />
@@ -455,7 +451,7 @@ export const HandoutBasic: FC = () => {
 								<KolInputRadio _orientation="horizontal" _options="[{'label':'Mr.','value':0},{'label':'Mrs.','value':1}]" _value="0" _label={`Salutation`} />
 								<KolInputCheckbox _label="">
 									<span slot="expert">
-										I accept the <KolAbbr _label="General Terms and Conditions">AGB</KolAbbr>.
+										I accept the <KolAbbr>AGB</KolAbbr>.
 									</span>
 								</KolInputCheckbox>
 							</div>

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

@@ -1,28 +1,64 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { KolLinkButton } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { useToasterService } from '../../hooks/useToasterService';
+import { fetchVariantData } from '../../shares/fetchVariantData';
+import { getCustomThemes } from '../../shares/store';
 import { SampleDescription } from '../SampleDescription';
 
-const ARGS = {
-	_href: '#/back-page',
-};
+export const LinkButtonBasic: FC = () => {
+	const [searchParams] = useSearchParams();
+	const theme = searchParams.get('theme') ?? getCustomThemes()?.[0]?.key;
+	const data = useMemo(() => (theme ? fetchVariantData(theme, 'buttonVariants') : []), [theme]);
+
+	const { dummyClickEventHandler } = useToasterService();
 
-export const LinkButtonBasic: FC = () => (
-	<>
-		<SampleDescription>
-			<p>KolLinkButton renders a link that looks like a button. The sample shows the different styling variants.</p>
-		</SampleDescription>
+	const dummyEventHandler = {
+		onClick: dummyClickEventHandler,
+	};
+	return (
+		<>
+			<SampleDescription>
+				<p>KolLinkButton renders a link that looks like a button. The sample shows the different theme exclusive styling variants.</p>
+			</SampleDescription>
 
-		<div className="flex flex-wrap gap-2">
-			<KolLinkButton _label="Primary" _variant="primary" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Secondary" _variant="secondary" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Normal" _variant="normal" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Danger" _variant="danger" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Ghost" _variant="ghost" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Access Key" _variant="primary" _accessKey="c" {...ARGS}></KolLinkButton>
-			<KolLinkButton _label="Short Key" _variant="primary" _shortKey="s" {...ARGS}></KolLinkButton>
-		</div>
-	</>
-);
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<div className="flex flex-wrap gap-4 items-center">
+						{!Array.isArray(data) || data.length === 0 ? (
+							<p>This theme has no variants for this component.</p>
+						) : (
+							data.map((element) => {
+								return (
+									<KolLinkButton _href="#/back-page" _icons="kolicon-house" _label={`${element}`} _variant={element} key={element} _on={dummyEventHandler} />
+								);
+							})
+						)}
+					</div>
+					<div className="flex flex-wrap gap-4 items-center">
+						{!Array.isArray(data) || data.length === 0 ? (
+							<p>This theme has no variants for this component.</p>
+						) : (
+							data.map((element) => {
+								return (
+									<KolLinkButton
+										_href="#/back-page"
+										_hideLabel
+										_icons="kolicon-settings"
+										_label={`${element}`}
+										_variant={element}
+										key={element}
+										_on={dummyEventHandler}
+									/>
+								);
+							})
+						)}
+					</div>
+				</section>
+			</div>
+		</>
+	);
+};

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

@@ -1,4 +1,4 @@
-import type { ButtonVariantPropType, KoliBriTableCell, KoliBriTableHeaderCell } from '@public-ui/components';
+import type { KoliBriTableCell, KoliBriTableHeaderCell, VariantClassNamePropType } from '@public-ui/components';
 import { createReactRenderElement, KolButton, KolButtonLink, KolLink, KolLinkButton, KolTableStateless } from '@public-ui/react-v19';
 import type { ComponentProps, FC } from 'react';
 import React from 'react';
@@ -16,7 +16,7 @@ function KolButtonWrapper(props: KolButtonProps) {
 	return <KolButton {...props} _on={dummyEventHandler} />;
 }
 
-const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeaderCell => {
+const getButtonHeaderCell = (variant: VariantClassNamePropType): KoliBriTableHeaderCell => {
 	const variantLabel = `${variant}`;
 	const capitalizedVariant = variantLabel.charAt(0).toUpperCase() + variantLabel.slice(1);
 	return {

package/src/components/table/routes.ts

@@ -53,8 +53,8 @@ export const TABLE_ROUTES: Routes = {
 		'stateful-export': TableStatefulExport,
 		'stateful-reset-sort': TableStatefulResetSort,
 		'stateful-settings-persistence': TableStatefulSettingsPersistence,
-		'stateful-with-selection': TableStatefulWithSelection,
 		'stateless-with-settings-menu': TableStatelessWithSettingsMenu,
+		'stateful-with-selection': TableStatefulWithSelection,
 		'stateful-with-single-selection': TableStatefulWithSingleSelection,
 		stateless: TableStateless,
 		'stateless-async': TableStatelessAsync,

package/src/components/table/stateful-with-selection.tsx

@@ -1,111 +1,101 @@
-import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
+import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
-import { getRoot } from '../../shares/react-roots';
+import React from 'react';
+
 import { SampleDescription } from '../SampleDescription';
 
-const DATA = [
-	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
-	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
-	{ id: '1003', name: 'This row is always unchecked', internalIdentifier: `AAA1003` },
-	{ id: '1004', name: 'This row is always checked', internalIdentifier: `AAA1004` },
-];
-type Data = (typeof DATA)[0];
-type KolTableStatefulElement = {
-	addEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;
-	removeEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;
-	getSelection?: () => Promise<KoliBriTableDataType[] | null>;
-};
+import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';
 
-function KolButtonWrapper({ label }: { label: string }) {
-	const { dummyClickEventHandler } = useToasterService();
+type ProjectTask = {
+	id: string;
+	project: string;
+	owner: string;
+};
 
-	const dummyEventHandler = {
-		onClick: dummyClickEventHandler,
-	};
+const HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {
+	horizontal: [
+		[
+			{ key: 'id', label: 'ID', width: 80 },
+			{ key: 'project', label: 'Project', width: 200 },
+			{ key: 'owner', label: 'Owner', width: 200 },
+			{
+				type: 'action',
+				key: 'actions',
+				label: 'Actions',
+				width: 250,
+				actions: (row) => {
+					const simpleRow = row as ProjectTask;
+					return [
+						{
+							type: 'button',
+							_label: 'Details',
+							_icons: 'kolicon-eye',
+							_hideLabel: true,
+							_on: {
+								onClick: () => alert(`Details: ${simpleRow.id} - ${simpleRow.project}`),
+							},
+						},
+					];
+				},
+			},
+		],
+	],
+};
 
-	return <KolButton _label={label} _on={dummyEventHandler} />;
-}
+const DATA: ProjectTask[] = [
+	{
+		id: 'T-01',
+		project: 'Onboarding checklist',
+		owner: 'Alex Rivera',
+	},
+	{
+		id: 'T-02',
+		project: 'Accessibility audit',
+		owner: 'Jamie Chen',
+	},
+	{
+		id: 'T-03',
+		project: 'UX audit',
+		owner: 'Tyler  Gray',
+	},
+	{
+		id: 'T-04',
+		project: 'Software Architectur',
+		owner: 'Tess Richardson',
+	},
+];
 
 export const TableStatefulWithSelection: FC = () => {
-	const [selectedValue, setSelectedValue] = useState<Data[] | null>();
-
 	const selection: KoliBriTableSelection = {
-		label: (row) => `Selection for ${(row as Data).name}`,
-		selectedKeys: selectedValue ? selectedValue.map((element) => element.internalIdentifier) : ['AAA1004'],
-		disabledKeys: ['AAA1003', 'AAA1004'],
-		keyPropertyName: 'internalIdentifier',
+		label: (row) => `Selection for ${(row as ProjectTask).id}`,
+		selectedKeys: ['T-01'],
+		disabledKeys: ['T-04'],
+		keyPropertyName: 'id',
 	};
 
-	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);
-
-	const handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<Data[]>) => {
-		console.log('Selection change via event', selection);
-	};
 	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
 		console.log('Selection change via callback', selection);
 	};
 
-	const handleButtonClick = async () => {
-		const tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;
-		const selection = await tableElement?.getSelection?.();
-		setSelectedValue(selection as Data[] | null);
-	};
-
-	useEffect(() => {
-		const tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;
-		const selectionChangeEvent = 'kolSelectionChange';
-		tableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);
-
-		return () => {
-			tableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);
-		};
-	}, [kolTableStatefulRef]);
-
-	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		const data = (cell as { data?: Data }).data;
-		const id = data?.id;
-		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);
-	};
-
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolTableStateful with checkboxes for selection enabled.</p>
+				<p>
+					Simple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with
+					inline action buttons demonstrate clean separation between data and UI behavior.
+				</p>
 			</SampleDescription>
 
 			<section className="w-full">
 				<KolTableStateful
-					_label="Table with selection checkboxes"
-					_headers={{
-						horizontal: [
-							[
-								{ key: 'id', label: '#ID', textAlign: 'left' },
-								{ key: 'name', label: 'Name', textAlign: 'left' },
-								{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
-							],
-						],
-					}}
+					_label="Tasks with action buttons"
+					_headers={HEADERS}
 					_data={DATA}
+					className="block"
 					_selection={selection}
 					_on={{ onSelectionChange: handleSelectionChangeCallback }}
-					className="block"
-					style={{ maxWidth: '600px' }}
-					ref={kolTableStatefulRef}
 				/>
-				<div className="grid grid-cols-3 items-end gap-4 mt-4">
-					<KolButton
-						_label="getSelection()"
-						_on={{
-							onClick: () => {
-								void handleButtonClick();
-							},
-						}}
-					></KolButton>
-					<pre className="text-base">{JSON.stringify(selectedValue, null, 2)}</pre>
-				</div>
 			</section>
 		</>
 	);

package/src/components/table/stateful-with-single-selection.tsx

@@ -1,110 +1,102 @@
-import type { KoliBriTableCell, KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
-import { createReactRenderElement, KolButton, KolTableStateful } from '@public-ui/react-v19';
+import type { KoliBriTableDataType, KoliBriTableSelection } from '@public-ui/components';
+import { KolTableStateful } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import React, { useEffect, useRef, useState } from 'react';
-import { useToasterService } from '../../hooks/useToasterService';
-import { getRoot } from '../../shares/react-roots';
+import React from 'react';
+
 import { SampleDescription } from '../SampleDescription';
 
-const DATA = [
-	{ id: '1001', name: 'Foo Bar', internalIdentifier: `AAA1001` },
-	{ id: '1002', name: 'Foo Baz', internalIdentifier: `AAA1002` },
-];
+import type { KoliBriTableHeaderCellWithLogic } from '@public-ui/components';
 
-type Data = (typeof DATA)[0];
-type KolTableStatefulElement = {
-	addEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;
-	removeEventListener: (type: string, listener: (event: CustomEvent<Data[]>) => void) => void;
-	getSelection?: () => Promise<KoliBriTableDataType[] | null>;
+type ProjectTask = {
+	id: string;
+	project: string;
+	owner: string;
 };
 
-function KolButtonWrapper({ label }: { label: string }) {
-	const { dummyClickEventHandler } = useToasterService();
-
-	const dummyEventHandler = {
-		onClick: dummyClickEventHandler,
-	};
+const HEADERS: { horizontal: KoliBriTableHeaderCellWithLogic[][] } = {
+	horizontal: [
+		[
+			{ key: 'id', label: 'ID', width: 80 },
+			{ key: 'project', label: 'Project', width: 200 },
+			{ key: 'owner', label: 'Owner', width: 200 },
+			{
+				type: 'action',
+				key: 'actions',
+				label: 'Actions',
+				width: 250,
+				actions: (row) => {
+					const simpleRow = row as ProjectTask;
+					return [
+						{
+							type: 'button',
+							_label: 'Start',
+							_icons: 'kolicon-chevron-right',
+							_variant: 'secondary',
+							_on: {
+								onClick: () => alert(`Start task ${simpleRow.id}`),
+							},
+						},
+					];
+				},
+			},
+		],
+	],
+};
 
-	return <KolButton _label={label} _on={dummyEventHandler} />;
-}
+const DATA: ProjectTask[] = [
+	{
+		id: 'T-01',
+		project: 'Onboarding checklist',
+		owner: 'Alex Rivera',
+	},
+	{
+		id: 'T-02',
+		project: 'Accessibility audit',
+		owner: 'Jamie Chen',
+	},
+	{
+		id: 'T-03',
+		project: 'UX audit',
+		owner: 'Tyler  Gray',
+	},
+	{
+		id: 'T-04',
+		project: 'Software Architectur',
+		owner: 'Tess Richardson',
+	},
+];
 
 export const TableStatefulWithSingleSelection: FC = () => {
-	const [selectedValue, setSelectedValue] = useState<Data | null>();
-
 	const selection: KoliBriTableSelection = {
-		label: (row) => `Selection for ${(row as Data).name}`,
+		label: (row) => `Selection for ${(row as ProjectTask).id}`,
+		selectedKeys: ['T-01'],
+		disabledKeys: ['T-04'],
+		keyPropertyName: 'id',
 		multiple: false,
-		selectedKeys: selectedValue ? [selectedValue.internalIdentifier] : [],
-		keyPropertyName: 'internalIdentifier',
 	};
 
-	const kolTableStatefulRef = useRef<HTMLKolTableStatefulElement>(null);
-
-	const handleSelectionChangeEvent = ({ detail: selection }: CustomEvent<Data[]>) => {
-		console.log('Selection change via event', selection);
-	};
 	const handleSelectionChangeCallback = (_event: Event, selection: KoliBriTableDataType[] | null) => {
 		console.log('Selection change via callback', selection);
 	};
 
-	const handleButtonClick = async () => {
-		const tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;
-		const selection = await tableElement?.getSelection?.();
-		setSelectedValue(selection as Data | null);
-	};
-
-	useEffect(() => {
-		const tableElement = kolTableStatefulRef.current as unknown as KolTableStatefulElement | null;
-		const selectionChangeEvent = 'kolSelectionChange';
-		tableElement?.addEventListener(selectionChangeEvent, handleSelectionChangeEvent);
-
-		return () => {
-			tableElement?.removeEventListener(selectionChangeEvent, handleSelectionChangeEvent);
-		};
-	}, [kolTableStatefulRef]);
-
-	const renderButton = (element: HTMLElement, cell: KoliBriTableCell) => {
-		const data = (cell as { data?: Data }).data;
-		const id = data?.id;
-		getRoot(createReactRenderElement(element)).render(<KolButtonWrapper label={`Click ${id}`} />);
-	};
-
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolTableStateful with radio buttons for selection enabled.</p>
+				<p>
+					Simple example using the refactored action column: Actions are defined once in the column header definition using a factory function. Two rows with
+					inline action buttons demonstrate clean separation between data and UI behavior.
+				</p>
 			</SampleDescription>
 
 			<section className="w-full">
 				<KolTableStateful
-					_label="Table with selection radio"
-					_headers={{
-						horizontal: [
-							[
-								{ key: 'id', label: '#ID', textAlign: 'left' },
-								{ key: 'name', label: 'Name', textAlign: 'left' },
-								{ key: 'action', label: 'Action', textAlign: 'left', render: renderButton },
-							],
-						],
-					}}
+					_label="Tasks with action buttons"
+					_headers={HEADERS}
 					_data={DATA}
+					className="block"
 					_selection={selection}
 					_on={{ onSelectionChange: handleSelectionChangeCallback }}
-					className="block"
-					style={{ maxWidth: '600px' }}
-					ref={kolTableStatefulRef}
 				/>
-				<div className="grid grid-cols-3 items-end gap-4 mt-4">
-					<KolButton
-						_label="getSelection()"
-						_on={{
-							onClick: () => {
-								void handleButtonClick();
-							},
-						}}
-					></KolButton>
-					<pre className="text-base">{JSON.stringify(selectedValue, null, 2)}</pre>
-				</div>
 			</section>
 		</>
 	);

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

@@ -34,28 +34,28 @@ export const SameHeightOfAllInteractiveElements: FC = () => {
 				</p>
 			</SampleDescription>
 			<div className="w-full flex flex-wrap gap-4">
-				<KolButton _icons="fa-solid fa-house" _label="Button" _on={dummyEventHandler} />
-				<KolButton _hideLabel _icons="fa-solid fa-house" _label="Button" _on={dummyEventHandler} />
-				<KolLinkButton _href="#" _icons="fa-solid fa-house" _label="Link-Button" _on={dummyEventHandler} />
-				<KolLinkButton _hideLabel _href="#" _icons="fa-solid fa-house" _label="Link-Button" _on={dummyEventHandler} />
-				<KolCombobox _hideLabel _icons="fa-solid fa-house" _label="Combobox" _suggestions={[]} />
+				<KolButton _icons="kolicon-house" _label="Button" _on={dummyEventHandler} />
+				<KolButton _hideLabel _icons="kolicon-house" _label="Button" _on={dummyEventHandler} />
+				<KolLinkButton _href="#" _icons="kolicon-house" _label="Link-Button" _on={dummyEventHandler} />
+				<KolLinkButton _hideLabel _href="#" _icons="kolicon-house" _label="Link-Button" _on={dummyEventHandler} />
+				<KolCombobox _hideLabel _icons="kolicon-house" _label="Combobox" _suggestions={[]} />
 				<KolInputColor
 					_hideLabel
 					_icons={{
-						left: 'fa-solid fa-house',
+						left: 'kolicon-house',
 					}}
 					_label="Input-Color"
 				/>
-				<KolInputFile _hideLabel _icons="fa-solid fa-house" _label="Input-File" />
-				<KolInputDate _hideLabel _icons="fa-solid fa-house" _label="Input-Date" />
-				<KolInputEmail _hideLabel _icons="fa-solid fa-house" _label="Input-Email" />
-				<KolInputNumber _hideLabel _icons="fa-solid fa-house" _label="Input-Number" />
-				<KolInputPassword _hideLabel _icons="fa-solid fa-house" _label="Input-Password" />
-				<KolInputRange _hideLabel _icons="fa-solid fa-house" _label="Input-Range" />
-				<KolInputText _hideLabel _icons="fa-solid fa-house" _label="Input-Text" />
-				<KolSelect _hideLabel _icons="fa-solid fa-house" _label="Combobox" _options={[]} />
-				<KolSingleSelect _hideLabel _icons="fa-solid fa-house" _label="Combobox" _options={[]} />
-				<KolTextarea _hideLabel _icons="fa-solid fa-house" _label="Combobox" />
+				<KolInputFile _hideLabel _icons="kolicon-house" _label="Input-File" />
+				<KolInputDate _hideLabel _icons="kolicon-house" _label="Input-Date" />
+				<KolInputEmail _hideLabel _icons="kolicon-house" _label="Input-Email" />
+				<KolInputNumber _hideLabel _icons="kolicon-house" _label="Input-Number" />
+				<KolInputPassword _hideLabel _icons="kolicon-house" _label="Input-Password" />
+				<KolInputRange _hideLabel _icons="kolicon-house" _label="Input-Range" />
+				<KolInputText _hideLabel _icons="kolicon-house" _label="Input-Text" />
+				<KolSelect _hideLabel _icons="kolicon-house" _label="Select" _options={[]} />
+				<KolSingleSelect _hideLabel _icons="kolicon-house" _label="Single Select" _options={[]} />
+				<KolTextarea _hideLabel _icons="kolicon-house" _label="Textarea" />
 			</div>
 		</>
 	);