@public-ui/sample-react 4.3.0-rc.4 → 4.3.0-rc.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "4.3.0-rc.4",
+  "version": "4.3.0-rc.6",
   "description": "This app contains samples for the KoliBri/Public UI",
   "type": "module",
   "license": "EUPL-1.2",
@@ -9,34 +9,34 @@
     "url": "https://github.com/public-ui/kolibri"
   },
   "dependencies": {
-    "@hookform/resolvers": "5.4.0",
+    "@hookform/resolvers": "5.5.7",
     "@stencil/core": "4.38.3",
-    "@types/node": "25.9.3",
+    "@types/node": "25.9.5",
     "@types/papaparse": "5.5.2",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "adopted-style-sheets": "1.1.9-rc.22",
-    "papaparse": "5.5.3",
-    "react": "19.2.7",
-    "react-dom": "19.2.7",
-    "react-hook-form": "7.79.0",
+    "adopted-style-sheets": "1.1.9-rc.25",
+    "papaparse": "5.5.4",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "react-hook-form": "7.83.0",
     "react-number-format": "5.4.5",
-    "react-router": "7.17.0",
-    "react-router-dom": "7.17.0",
+    "react-router": "7.18.2",
+    "react-router-dom": "7.18.2",
     "tslib": "2.8.1",
     "typescript": "5.9.3",
     "world_countries_lists": "3.3.0",
     "zod": "4.4.3",
-    "@public-ui/components": "4.3.0-rc.4",
-    "@public-ui/react-v19": "4.3.0-rc.4",
-    "@public-ui/react-hook-form-adapter": "4.3.0-rc.4"
+    "@public-ui/react-v19": "4.3.0-rc.6",
+    "@public-ui/components": "4.3.0-rc.6",
+    "@public-ui/react-hook-form-adapter": "4.3.0-rc.6"
   },
   "devDependencies": {
-    "eslint": "9.39.4",
-    "knip": "6.16.1",
-    "prettier": "3.8.4",
+    "eslint": "9.39.5",
+    "knip": "6.29.0",
+    "prettier": "3.9.6",
     "prettier-plugin-organize-imports": "4.3.0",
-    "stylelint": "17.13.0"
+    "stylelint": "17.14.1"
   },
   "files": [
     "assets",

package/src/components/Navigation.tsx

@@ -1,38 +1,87 @@
-import { KolAccordion, KolTree, KolTreeItem } from '@public-ui/react-v19';
+import { KolInputText, KolTree, KolTreeItem } from '@public-ui/react-v19';
 import * as React from 'react';
+import { useState } from 'react';
 import { useHref, useMatch, useResolvedPath } from 'react-router-dom';
-import { useMobile } from '../hooks/useMobile';
 import type { Route, Routes } from '../shares/types';
 
 type NavigationProps = {
 	routes: Routes;
 };
 
-function ComponentNavContainer({ children }: { children?: React.ReactNode }): React.ReactNode {
-	const isMobile = useMobile();
+function isRoutes(x: Route): x is Routes {
+	return typeof x === 'object' && x !== null;
+}
 
-	return isMobile ? (
-		<KolAccordion _label="All components" class="mt">
-			{children}
-		</KolAccordion>
-	) : (
-		<div className="mt scrollable-container">{children}</div>
-	);
+function cloneSubtree(route: Route): Route {
+	if (!isRoutes(route)) return route; // FC einfach durchreichen
+	const out: Routes = {};
+	for (const [k, v] of Object.entries(route)) out[k] = cloneSubtree(v);
+	return out;
+}
+
+function tokenize(query: string): string[] {
+	return query.trim().toLowerCase().split(/\s+/).filter(Boolean);
 }
 
-function TreeItem({ label, to, children }: any) {
+function pathMatchesTokens(pathSegments: string[], tokens: string[]): boolean {
+	const segs = pathSegments.map((s) => s.toLowerCase());
+	const fullPath = segs.join('/');
+
+	return tokens.every((t) => segs.some((seg) => seg.includes(t)) || fullPath.includes(t));
+}
+
+function walkPath(current: Routes, tokens: string[], path: string[]): Routes {
+	const out: Routes = {};
+
+	for (const [key, value] of Object.entries(current)) {
+		const nextPath = [...path, key];
+
+		const matchesHere = pathMatchesTokens(nextPath, tokens);
+
+		if (matchesHere) {
+			// ganzer Subtree ab hier (weil Pfad bis hier alle Tokens erfüllt)
+			out[key] = cloneSubtree(value);
+			continue;
+		}
+
+		if (isRoutes(value)) {
+			const filteredChildren = walkPath(value, tokens, nextPath);
+			if (Object.keys(filteredChildren).length > 0) {
+				out[key] = filteredChildren; // Pfad zu Treffern behalten
+			}
+		}
+	}
+
+	return out;
+}
+
+function filterRoutes(routes: Routes, query: string): Routes {
+	const tokens = tokenize(query);
+	if (tokens.length === 0) return cloneSubtree(routes) as Routes;
+
+	return walkPath(routes, tokens, []);
+}
+
+function ComponentNavContainer({ children }: { children?: React.ReactNode }): React.ReactNode {
+	return <div className="mt scrollable-container">{children}</div>;
+}
+
+function TreeItem({ label, to, children, open }: any) {
 	const href = useHref(to);
 	const resolved = useResolvedPath(to);
 	const match = useMatch({ path: resolved.pathname, end: true });
 
 	return (
-		<KolTreeItem _label={label} _href={href} _active={!!match}>
+		<KolTreeItem _label={label} _href={href} _active={!!match} _open={open}>
 			{children}
 		</KolTreeItem>
 	);
 }
 
 function Navigation({ routes }: NavigationProps): React.ReactNode {
+	const [query, setQuery] = useState<string>('');
+	let filteredRoutes = filterRoutes(routes, query);
+
 	const buildSubTree = (parentName: string, children: Route) => {
 		return Object.keys(children).map((childName) => {
 			const isTreeExample = parentName === 'tree' && childName === 'basic/:subPage';
@@ -43,15 +92,25 @@ function Navigation({ routes }: NavigationProps): React.ReactNode {
 		});
 	};
 
-	const parentTreeElements = Object.entries(routes).map(([parentName, children]) => (
-		<TreeItem key={parentName} label={parentName} to={parentName}>
+	const parentTreeElements = Object.entries(filteredRoutes).map(([parentName, children]) => (
+		<TreeItem key={parentName} label={parentName} to={parentName} open={!!query}>
 			{buildSubTree(parentName, children)}
 		</TreeItem>
 	));
 
 	return (
 		<ComponentNavContainer>
-			<nav>
+			<KolInputText
+				_label="Suche"
+				_on={{
+					onInput: (event: Event) => {
+						const input = event.target as HTMLInputElement;
+						setQuery(input.value);
+						filteredRoutes = filterRoutes(routes, query);
+					},
+				}}
+			/>
+			<nav className="main-nav">
 				<KolTree _label="Navigation" class="block">
 					{parentTreeElements}
 				</KolTree>

package/src/components/Sidebar.tsx

@@ -1,9 +1,11 @@
 import type { FC } from 'react';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 
-import { KolButton, KolHeading, KolSelect, KolVersion } from '@public-ui/react-v19';
+import { KolButton, KolDrawer, KolHeading, KolSelect, KolVersion } from '@public-ui/react-v19';
+import { useMobile } from '../hooks/useMobile';
 
 import type { SelectOption } from '@public-ui/components';
+import { useLocation } from 'react-router';
 import type { Theme } from '../shares/theme';
 import type { Routes } from '../shares/types';
 import Navigation from './Navigation';
@@ -81,6 +83,14 @@ export const Sidebar: FC<Props> = ({ version, themes, theme, routes, routeList,
 		[themes],
 	);
 
+	const isMobile = useMobile();
+	const locationWatch = useLocation();
+
+	useEffect(() => {
+		drawerElement.current?.close();
+	}, [locationWatch]);
+	const drawerElement = useRef<HTMLKolDrawerElement>(null);
+
 	return (
 		<aside className="app-sidebar p-4">
 			<div className="scrollable-container-wrapper">
@@ -89,16 +99,35 @@ export const Sidebar: FC<Props> = ({ version, themes, theme, routes, routeList,
 					<KolVersion _label={version}></KolVersion>
 				</div>
 				<BuildInformation buildDate={buildDate} commitHash={commitHash} />
-				<KolSelect _label="Theme" _options={themeOption} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect>
-				<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
+				{!isMobile ? <KolSelect _label="Theme" _options={themeOption} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect> : ''}
+				{!isMobile ? <KolHeading _label="Components" _level={2} className="block mt"></KolHeading> : ''}
 				<div className="flex flex-justify-between flex-items-center mt">
 					<KolButton _icons="kolicon-chevron-left" _hideLabel _label="Previous component" _on={{ onClick: handlePreviousClick }} />
-					<span className="text-base text-center">
-						{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
-					</span>
+
+					{isMobile ? (
+						<div className="flex gap-4 flex-items-center">
+							<span className="text-base text-center">
+								{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
+							</span>
+							<KolButton _label="Navigation" _hideLabel _icons={{ right: 'kolicon-settings' }} _on={{ onClick: () => drawerElement.current?.showModal() }} />
+						</div>
+					) : (
+						<span className="text-base text-center">
+							{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
+						</span>
+					)}
+
 					<KolButton _icons="kolicon-chevron-right" _hideLabel _label="Next component" _on={{ onClick: handleNextClick }} />
 				</div>
-				<Navigation routes={routes} />
+				{isMobile ? (
+					<KolDrawer _align="top" _label="Navigation" _hasCloser={true} ref={drawerElement}>
+						<KolSelect _label="Theme" _options={themeOption} _on={{ onChange: handleThemeSelectChange }} _value={theme} class="mt"></KolSelect>
+						<KolHeading _label="Components" _level={2} className="block mt"></KolHeading>
+						<Navigation routes={routes} />
+					</KolDrawer>
+				) : (
+					<Navigation routes={routes} />
+				)}
 			</div>
 		</aside>
 	);

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/avatar/routes.ts

@@ -1,8 +1,10 @@
 import type { Routes } from '../../shares/types';
 import { AvatarBasic } from './basic';
+import { AvatarSize } from './size';
 
 export const AVATAR_ROUTES: Routes = {
 	avatar: {
 		basic: AvatarBasic,
+		size: AvatarSize,
 	},
 };

package/src/components/avatar/size.tsx

@@ -0,0 +1,26 @@
+import { KolAvatar } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const AvatarSize: FC = () => (
+	<>
+		<SampleDescription>
+			<p>
+				KolAvatar is <code>6.25rem</code> (100px at the default 16px root font-size) wide/tall by default and simply fills its host element, so it can be
+				resized proportionally with plain CSS <code>width</code> and/or <code>height</code> (set through the <code>style</code> prop). Setting only{' '}
+				<code>width</code> is the reliable way to size it below the default. If <code>width</code> and <code>height</code> are set to different values, the
+				avatar stays square by using the larger of the two - it is centered on its host and may visually extend beyond it on the smaller axis. The
+				initials&apos; font size always scales with the resulting size automatically.
+			</p>
+		</SampleDescription>
+
+		<div className="flex flex-wrap items-center gap-4">
+			<KolAvatar style={{ width: '30px' }} _label="Elke Mustermann" />
+			<KolAvatar style={{ width: '30px', height: '45px' }} _label="Marianne" />
+			<KolAvatar style={{ width: '60px', height: '30px' }} _color="#0000FF" _label="Christian" />
+			<KolAvatar _src="assets/img_avatar.jpg" _label="Elke Mustermann" />
+			<KolAvatar style={{ width: '150px' }} _src="assets/img_avatar.jpg" _label="Elke Mustermann" />
+		</div>
+	</>
+);

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/select/multiple-dropdown.tsx

@@ -0,0 +1,36 @@
+import { KolSelect } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { InputEventValueDemo } from '../InputEventValueDemo';
+import { SampleDescription } from '../SampleDescription';
+
+export const SelectMultipleDropdown: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Shows KolSelect with multiple=true and rows=1 - a select with multiselection in a dropdown.</p>
+		</SampleDescription>
+
+		<InputEventValueDemo
+			label="KolSelect"
+			renderInput={(handlers) => (
+				<KolSelect
+					_label="Select options"
+					_options={[
+						{ label: 'One', value: 'one' },
+						{ label: 'Two', value: 'two' },
+						{ label: 'Three', value: 'three' },
+						{ label: 'Four', value: 'four' },
+						{ label: 'Five', value: 'five' },
+						{ label: 'Six', value: 'six' },
+						{ label: 'Seven', value: 'seven' },
+						{ label: 'Eight', value: 'eight' },
+						{ label: 'Nine', value: 'nine' },
+					]}
+					_multiple={true}
+					_rows={1}
+					_on={handlers}
+				/>
+			)}
+		/>
+	</>
+);

package/src/components/select/routes.ts

@@ -1,10 +1,12 @@
 import type { Routes } from '../../shares/types';
 import { SelectBasic } from './basic';
 import { SelectOnInputOnChange } from './get-value';
+import { SelectMultipleDropdown } from './multiple-dropdown';
 
 export const SELECT_ROUTES: Routes = {
 	select: {
 		basic: SelectBasic,
 		'get-value': SelectOnInputOnChange,
+		'multiple-dropdown': SelectMultipleDropdown,
 	},
 };

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>
 		</>
 	);

package/tsconfig.json

@@ -7,7 +7,7 @@
 		"preserveConstEnums": true,
 		"sourceMap": true,
 		"preserveSymlinks": true,
-		"moduleResolution": "node",
+		"moduleResolution": "bundler",
 		"lib": ["es2017", "dom"],
 		"typeRoots": ["node_modules/@types"],
 		"noUnusedLocals": true,

package/src/components/input-checkbox/aria-details.tsx

@@ -1,53 +0,0 @@
-import { KolInputCheckbox } from '@public-ui/react-v19';
-import type { FC } from 'react';
-import React from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-export const InputCheckboxAriaDetails: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				Demonstrates how to use <code>_ariaDetails</code> to reference an external element that provides detailed information about form inputs. The{' '}
-				<code>_ariaDetails</code> prop uses <code>ElementInternals.ariaDetailsElements</code> to cross the Shadow DOM boundary, making it accessible to screen
-				readers.
-			</p>
-		</SampleDescription>
-
-		<div className="grid gap-8">
-			{/* Checkbox with independent details */}
-			<div className="grid gap-4 p-4 border border-gray-300 rounded">
-				<h2 className="text-lg font-semibold">Checkbox with Aria Details</h2>
-
-				<KolInputCheckbox _label="Accept terms of service" _ariaDetails="checkbox-details" />
-
-				<div id="checkbox-details" className="p-4 bg-blue-50 border-l-4 border-blue-400 rounded" role="complementary">
-					<h3 className="font-semibold text-blue-900 mb-2">Terms and Conditions</h3>
-					<p className="text-sm text-blue-800">
-						By checking this box, you agree to our terms of service and privacy policy. Please read them carefully before proceeding.
-					</p>
-				</div>
-			</div>
-
-			{/* Multiple checkboxes with different details */}
-			<div className="grid gap-4 p-4 border border-gray-300 rounded">
-				<h2 className="text-lg font-semibold">Multiple Checkboxes with Individual Details</h2>
-
-				<KolInputCheckbox _label="Enable notifications" _ariaDetails="notification-details" />
-
-				<KolInputCheckbox _label="Share usage data" _ariaDetails="usage-details" />
-
-				<div id="notification-details" className="p-4 bg-green-50 border-l-4 border-green-400 rounded" role="complementary">
-					<h3 className="font-semibold text-green-900 mb-2">About Notifications</h3>
-					<p className="text-sm text-green-800">We will send you important updates and alerts about your account activity.</p>
-				</div>
-
-				<div id="usage-details" className="p-4 bg-orange-50 border-l-4 border-orange-400 rounded" role="complementary">
-					<h3 className="font-semibold text-orange-900 mb-2">About Usage Data</h3>
-					<p className="text-sm text-orange-800">
-						Sharing usage data helps us improve our service and provide better experiences. Your data is encrypted and never shared with third parties.
-					</p>
-				</div>
-			</div>
-		</div>
-	</>
-);

package/src/components/single-select/aria-details.tsx

@@ -1,93 +0,0 @@
-import { KolSingleSelect } from '@public-ui/react-v19';
-import type { FC } from 'react';
-import React from 'react';
-import { SampleDescription } from '../SampleDescription';
-
-export const SingleSelectAriaDetails: FC = () => (
-	<>
-		<SampleDescription>
-			<p>
-				Demonstrates how to use <code>_ariaDetails</code> to reference external elements that provide detailed information about select options. The{' '}
-				<code>_ariaDetails</code> prop uses <code>ElementInternals.ariaDetailsElements</code> to cross the Shadow DOM boundary, making it accessible to screen
-				readers.
-			</p>
-		</SampleDescription>
-
-		<div className="grid gap-8">
-			{/* Single Select with independent details */}
-			<div className="grid gap-4 p-4 border border-gray-300 rounded">
-				<h2 className="text-lg font-semibold">Single Select with Aria Details</h2>
-
-				<KolSingleSelect
-					_label="Select your country"
-					_ariaDetails="country-details"
-					_options={[
-						{ label: 'Germany', value: 'de' },
-						{ label: 'Austria', value: 'at' },
-						{ label: 'Switzerland', value: 'ch' },
-						{ label: 'Netherlands', value: 'nl' },
-					]}
-				/>
-
-				<div id="country-details" className="p-4 bg-blue-50 border-l-4 border-blue-400 rounded" role="complementary">
-					<h3 className="font-semibold text-blue-900 mb-2">Country Selection</h3>
-					<p className="text-sm text-blue-800">
-						Select your country of residence. This helps us provide localized content, shipping information, and applicable tax rates for your region.
-					</p>
-				</div>
-			</div>
-
-			{/* Multiple Single Selects with different details */}
-			<div className="grid gap-4 p-4 border border-gray-300 rounded">
-				<h2 className="text-lg font-semibold">Multiple Selects with Individual Details</h2>
-
-				<KolSingleSelect
-					_label="Experience Level"
-					_ariaDetails="experience-details"
-					_options={[
-						{ label: 'Beginner', value: 'beginner' },
-						{ label: 'Intermediate', value: 'intermediate' },
-						{ label: 'Advanced', value: 'advanced' },
-						{ label: 'Expert', value: 'expert' },
-					]}
-				/>
-
-				<KolSingleSelect
-					_label="Support Plan"
-					_ariaDetails="support-details"
-					_options={[
-						{ label: 'Community (Free)', value: 'community' },
-						{ label: 'Standard', value: 'standard' },
-						{ label: 'Professional', value: 'professional' },
-						{ label: 'Enterprise', value: 'enterprise' },
-					]}
-				/>
-
-				<div id="experience-details" className="p-4 bg-green-50 border-l-4 border-green-400 rounded" role="complementary">
-					<h3 className="font-semibold text-green-900 mb-2">About Experience Level</h3>
-					<p className="text-sm text-green-800">
-						Your experience level helps us provide appropriate documentation, tutorials, and support. It also affects which features are recommended to you.
-					</p>
-				</div>
-
-				<div id="support-details" className="p-4 bg-orange-50 border-l-4 border-orange-400 rounded" role="complementary">
-					<h3 className="font-semibold text-orange-900 mb-2">Support Plans</h3>
-					<ul className="text-sm text-orange-800 space-y-1">
-						<li>
-							<strong>Community:</strong> Community forums only
-						</li>
-						<li>
-							<strong>Standard:</strong> Email support, 24-hour response
-						</li>
-						<li>
-							<strong>Professional:</strong> Priority email + phone, 4-hour response
-						</li>
-						<li>
-							<strong>Enterprise:</strong> Dedicated support, 1-hour response + SLA
-						</li>
-					</ul>
-				</div>
-			</div>
-		</div>
-	</>
-);