@public-ui/sample-react 4.0.0-alpha.1 → 4.0.0-alpha.11

package/src/components/button/width.tsx

@@ -1,10 +1,8 @@
-import React from 'react';
-
-import { KolButton } from '@public-ui/react-v19';
-
+import { KolButton, KolHeading } from '@public-ui/react-v19';
 import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
+import React from 'react';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonWidth: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -19,24 +17,31 @@ export const ButtonWidth: FC = () => {
 	return (
 		<>
 			<SampleDescription>
-				<p>This sample shows KolButton with adjusted widths.</p>
+				<p>This story demonstrates buttons with custom widths. You can control the button width using CSS classes.</p>
 			</SampleDescription>
 
-			<div className="grid gap-14">
-				<div className="flex flex-wrap gap-4">
-					<KolButton _label="Primary" _variant="primary" {...ARGS}></KolButton>
-					<KolButton _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-					<KolButton _label="Normal" _variant="normal" {...ARGS}></KolButton>
-					<KolButton _label="Danger" _variant="danger" {...ARGS}></KolButton>
-					<KolButton _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-				</div>
-				<div className="flex flex-wrap gap-4">
-					<KolButton _disabled _label="Primary" _variant="primary" {...ARGS}></KolButton>
-					<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS}></KolButton>
-					<KolButton _disabled _label="Normal" _variant="normal" {...ARGS}></KolButton>
-					<KolButton _disabled _label="Danger" _variant="danger" {...ARGS}></KolButton>
-					<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS}></KolButton>
-				</div>
+			<div className="grid gap-8">
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Fixed Width Buttons (8rem)" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _label="Primary" _variant="primary" {...ARGS} />
+						<KolButton _label="Secondary" _variant="secondary" {...ARGS} />
+						<KolButton _label="Normal" _variant="normal" {...ARGS} />
+						<KolButton _label="Danger" _variant="danger" {...ARGS} />
+						<KolButton _label="Ghost" _variant="ghost" {...ARGS} />
+					</div>
+				</section>
+
+				<section className="grid gap-4">
+					<KolHeading _level={2} _label="Fixed Width Disabled Buttons (8rem)" />
+					<div className="flex flex-wrap gap-4">
+						<KolButton _disabled _label="Primary" _variant="primary" {...ARGS} />
+						<KolButton _disabled _label="Secondary" _variant="secondary" {...ARGS} />
+						<KolButton _disabled _label="Normal" _variant="normal" {...ARGS} />
+						<KolButton _disabled _label="Danger" _variant="danger" {...ARGS} />
+						<KolButton _disabled _label="Ghost" _variant="ghost" {...ARGS} />
+					</div>
+				</section>
 			</div>
 		</>
 	);

package/src/components/button-link/aria-description.tsx

@@ -1,6 +1,6 @@
 import { KolButtonLink } from '@public-ui/react-v19';
-import React from 'react';
 import type { FC } from 'react';
+import React from 'react';
 import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkAriaDescription: FC = () => (

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

@@ -3,8 +3,8 @@ import React from 'react';
 import { KolButtonLink, KolHeading } from '@public-ui/react-v19';
 
 import type { FC } from 'react';
-import { SampleDescription } from '../SampleDescription';
 import { useToasterService } from '../../hooks/useToasterService';
+import { SampleDescription } from '../SampleDescription';
 
 export const ButtonLinkBasic: FC = () => {
 	const { dummyClickEventHandler } = useToasterService();
@@ -21,7 +21,7 @@ export const ButtonLinkBasic: FC = () => {
 				</p>
 			</SampleDescription>
 			<section className="text-base">
-				<KolHeading _level={2} _label="Button-Link with variant 'inline'" />
+				<KolHeading _level={2} _label="Button-Link with _inline" />
 
 				<p>
 					In this paragraph, a link is inserted that contains no additional attributes. <KolButtonLink _label="Simple Link" /> It is rendered by default as an{' '}
@@ -38,16 +38,18 @@ export const ButtonLinkBasic: FC = () => {
 					Therefore, I go over the entire width of the parent element to create a line break.
 				</p>
 
-				<KolHeading _level={2} _label="Button-Link with variant 'standalone'" />
+				<KolHeading _level={2} _label="Button-Link with _inline={false}" />
+
+				<p>Use the boolean _inline property to render the link inline (default) or standalone.</p>
 
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _disabled _variant="standalone" />
+					<KolButtonLink _label="Disabled ButtonLink" _disabled _inline={false} />
 				</p>
 				<p>
-					<KolButtonLink _label="With access key" _accessKey="c" _on={dummyEventHandler} _variant="standalone" />
+					<KolButtonLink _label="With access key" _accessKey="c" _inline={false} _on={dummyEventHandler} />
 				</p>
 				<p>
-					<KolButtonLink _label="Disabled ButtonLink" _shortKey="s" _variant="standalone" />
+					<KolButtonLink _label="Disabled ButtonLink" _inline={false} _shortKey="s" />
 				</p>
 			</section>
 		</>

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

@@ -12,34 +12,35 @@ export const ButtonLinkIcons: FC = () => (
 		</SampleDescription>
 
 		<div className="grid gap-4">
-			<KolButtonLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+			<KolButtonLink _icons="fa-solid fa-house" _label="I am a link with an icon on the left" />
 			<KolButtonLink
 				_icons={{
-					right: 'codicon codicon-home',
+					right: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon on the right"
 			/>
 			<KolButtonLink
 				_icons={{
-					top: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
 				}}
 				_label="I am a link with an icon at the top"
 			/>
 			<KolButtonLink
 				_icons={{
-					bottom: 'codicon codicon-home',
+					bottom: 'fa-solid fa-house',
 				}}
 				_label="I am a link with icon below"
 			/>
 			<KolButtonLink
 				_icons={{
-					top: 'codicon codicon-home',
-					right: 'codicon codicon-home',
-					bottom: 'codicon codicon-home',
-					left: 'codicon codicon-home',
+					top: 'fa-solid fa-house',
+					right: 'fa-solid fa-house',
+					bottom: 'fa-solid fa-house',
+					left: 'fa-solid fa-house',
 				}}
 				_label="I am a link with all icons"
 			/>
+			<KolButtonLink _icons="fa-solid fa-house" _hideLabel _label="I am a link with icon only" />
 		</div>
 	</>
 );

package/src/components/button-link/routes.ts

@@ -1,8 +1,8 @@
 import { Routes } from '../../shares/types';
+import { ButtonLinkAriaDescription } from './aria-description';
 import { ButtonLinkBasic } from './basic';
 import { ButtonLinkIcons } from './icons';
 import { ButtonLinkImage } from './image';
-import { ButtonLinkAriaDescription } from './aria-description';
 
 export const BUTTON_LINK_ROUTES: Routes = {
 	'button-link': {

package/src/components/card/headlines.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { KolCard } from '@public-ui/react-v19';
+
+import type { FC } from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const CardHeadlines: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>This sample shows cards with all headline levels as title.</p>
+			</SampleDescription>
+
+			<div className="w-full grid grid-cols-2 gap-4">
+				<KolCard _label="Card with headline level 0" _level={0}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 1" _level={1}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 2" _level={2}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 3" _level={3}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 4" _level={4}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 5" _level={5}>
+					<div>Card contents.</div>
+				</KolCard>
+
+				<KolCard _label="Card with headline level 6" _level={6}>
+					<div>Card contents.</div>
+				</KolCard>
+			</div>
+		</>
+	);
+};

package/src/components/card/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { CardBasic } from './basic';
+import { CardHeadlines } from './headlines';
 
 export const CARD_ROUTES: Routes = {
 	card: {
 		basic: CardBasic,
+		headlines: CardHeadlines,
 	},
 };

package/src/components/combobox/basic.tsx

@@ -1,8 +1,8 @@
 import type { FC } from 'react';
 import React from 'react';
 import { FormWrap } from '../FormWrap';
-import { ComboboxVariants } from './partials/variants';
 import { SampleDescription } from '../SampleDescription';
+import { ComboboxVariants } from './partials/variants';
 export const ComboboxBasic: FC = () => {
 	return (
 		<>

package/src/components/combobox/html.tsx

@@ -0,0 +1,16 @@
+import { KolCombobox } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
+import { SampleDescription } from '../SampleDescription';
+
+export const ComboboxHtml: FC = () => {
+	return (
+		<>
+			<SampleDescription>
+				<p>A HTML only KolCombobox.</p>
+			</SampleDescription>
+
+			<KolCombobox _label="With string array in html" _suggestions="['Herr','Frau','Firma']" _value="Herr" />
+		</>
+	);
+};

package/src/components/combobox/partials/cases.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { KolCombobox } from '@public-ui/react-v19';
 
+import type { Components } from '@public-ui/components';
 import { ERROR_MSG, HINT_MSG } from '../../../shares/constants';
 import { COUNTRY_SUGGESTIONS } from '../../../shares/country';
-import type { Components } from '@public-ui/components';
 
 export const ComboboxCases = (props: Partial<Components.KolCombobox>) => {
 	return (

package/src/components/combobox/partials/variants.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import type { Components } from '@public-ui/components';
+import React from 'react';
 
-import { ComboboxCases } from './cases';
 import { SampleColumns } from '../../SampleColumns';
+import { ComboboxCases } from './cases';
 
 export const ComboboxVariants = (props: Partial<Components.KolCombobox>) => {
 	return (

package/src/components/combobox/routes.ts

@@ -1,8 +1,10 @@
 import { Routes } from '../../shares/types';
 import { ComboboxBasic } from './basic';
+import { ComboboxHtml } from './html';
 
 export const COMBOBOX_ROUTES: Routes = {
 	combobox: {
 		basic: ComboboxBasic,
+		html: ComboboxHtml,
 	},
 };

package/src/components/drawer/basic.tsx

@@ -1,9 +1,9 @@
 import type { FC } from 'react';
-import React, { useRef, useState, useEffect } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton, KolInputCheckbox } from '@public-ui/react-v19';
+import { KolButton, KolDrawer, KolInputCheckbox } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';

package/src/components/drawer/controlled.tsx

@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 
 import type { AlignPropType } from '@public-ui/components';
-import { KolDrawer, KolButton } from '@public-ui/react-v19';
+import { KolButton, KolDrawer } from '@public-ui/react-v19';
 import { SampleDescription } from '../SampleDescription';
 
 import { DrawerRadioAlign } from './partials/align';

package/src/components/form/basic.tsx

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

package/src/components/handout/basic.tsx

@@ -1,6 +1,4 @@
 import type { ButtonProps, KoliBriTableHeaders } from '@public-ui/components';
-import type { FC } from 'react';
-import React from 'react';
 import {
 	KolAbbr,
 	KolAccordion,
@@ -34,11 +32,13 @@ import {
 	KolTextarea,
 	KolVersion,
 } from '@public-ui/react-v19';
+import type { FC } from 'react';
+import React from 'react';
 
-import { getTheme, getThemeName } from '../../shares/store';
+import { useToasterService } from '../../hooks/useToasterService';
 import { getRoot } from '../../shares/react-roots';
+import { getTheme, getThemeName } from '../../shares/store';
 import { TABLE_DATA, type TableDataType } from './table-data';
-import { useToasterService } from '../../hooks/useToasterService';
 
 function KolButtonWrapper({ _on, ...other }: ButtonProps & { style: Record<string, unknown> }) {
 	const { dummyClickEventHandler } = useToasterService();
@@ -84,6 +84,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				},
 				sortDirection: 'ASC',
 				textAlign: 'right',
+				width: '100px',
 			},
 			{
 				key: 'tuesday',
@@ -105,6 +106,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					return 0;
 				},
 				sortDirection: 'DESC',
+				width: '100px',
 			},
 			{
 				key: 'wednesday',
@@ -116,6 +118,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
 				},
+				width: '110px',
 			},
 			{
 				key: 'thursday',
@@ -127,6 +130,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'friday',
@@ -138,6 +142,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'saturday',
@@ -149,6 +154,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 			{
 				key: 'sunday',
@@ -160,6 +166,7 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 					el.appendChild(renderElement);
 					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
 				},
+				width: '100px',
 			},
 		],
 	],
@@ -257,62 +264,56 @@ export const HandoutBasic: FC = () => {
 						<KolTabs _label="" _selected={0} _tabs={[{ _label: 'Button' }, { _label: 'LinkButton' }, { _label: 'Disabled Tab', _disabled: true }]}>
 							<div className="grid gap-2 py-2">
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
-									<KolButton _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-left" _label="primary" _variant="primary" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
-									<KolButton
-										_disabled
-										_icons={{ right: 'codicon codicon-arrow-right' }}
-										_label="secondary"
-										_variant="secondary"
-										_on={dummyEventHandler}
-									></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-right" _label="secondary" _variant="secondary" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
-									<KolButton _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-up" _label="danger" _variant="danger" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolButton _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
-									<KolButton _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
-									<KolButton _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+									<KolButton _disabled _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
+									<KolButton _hideLabel _icons="kolicon-chevron-down" _label="normal" _variant="normal" _on={dummyEventHandler}></KolButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 									<KolButton _label="ghost" _variant="ghost"></KolButton>
 									<KolButton _disabled _label="ghost" _variant="ghost"></KolButton>
-									<KolButton _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
+									<KolButton _icons="fa-solid fa-house" _hideLabel _label="ghost" _variant="ghost" _on={dummyEventHandler}></KolButton>
 								</div>
 							</div>
 							<div className="grid gap-2 py-2">
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ left: 'kolicon-chevron-left' }} _label="primary" _variant="primary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-left" _label="primary" _variant="primary"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ right: 'kolicon-chevron-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-right" _label="secondary" _variant="secondary"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ top: 'kolicon-chevron-up' }} _label="danger" _variant="danger"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-up" _label="danger" _variant="danger"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons={{ bottom: 'kolicon-chevron-down' }} _label="normal" _variant="normal"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _hideLabel _icons="kolicon-chevron-down" _label="normal" _variant="normal"></KolLinkButton>
 								</div>
 								<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 									<KolLinkButton _href="#/back-page" _label="ghost" _variant="ghost"></KolLinkButton>
 									<KolLinkButton _href="#/back-page" _label="ghost" _variant="ghost"></KolLinkButton>
-									<KolLinkButton _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
+									<KolLinkButton _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
 								</div>
 							</div>
 						</KolTabs>
@@ -323,8 +324,8 @@ export const HandoutBasic: FC = () => {
 						<KolAccordion _label="Links" _level={3} _open>
 							<div className="grid gap-2" slot="">
 								<KolLink _href="#/back-page" _label="Link text"></KolLink>
-								<KolLink _href="#/back-page" _icons="codicon codicon-home" _label="Link text with icon"></KolLink>
-								<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link text with icon only"></KolLink>
+								<KolLink _href="#/back-page" _icons="fa-solid fa-house" _label="Link text with icon"></KolLink>
+								<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link text with icon only"></KolLink>
 								<KolLink _href="/" _label="Visited link"></KolLink>
 								<p>
 									I am a <KolLink _href="#/back-page" _label="externer Link" _target="w3c"></KolLink> in the running text.
@@ -334,17 +335,17 @@ export const HandoutBasic: FC = () => {
 						<KolAccordion _label="ButtonLinks" _level={3}>
 							<div className="grid gap-2" slot="">
 								<KolButtonLink _label="Link text"></KolButtonLink>
-								<KolButtonLink _icons="codicon codicon-home" _label="Link text with icon"></KolButtonLink>
-								<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="Link text with icon only"></KolButtonLink>
+								<KolButtonLink _icons="fa-solid fa-house" _label="Link text with icon"></KolButtonLink>
+								<KolButtonLink _icons="fa-solid fa-house" _hideLabel _label="Link text with icon only"></KolButtonLink>
 								<p>
 									I am a <KolButtonLink _label="Link"></KolButtonLink> in the running text.
 								</p>
 								<KolButtonLink
 									_icons={{
-										left: 'codicon codicon-arrow-left',
-										right: 'codicon codicon-arrow-right',
-										top: 'codicon codicon-arrow-up',
-										bottom: 'codicon codicon-arrow-down',
+										left: 'kolicon-chevron-left',
+										right: 'kolicon-chevron-right',
+										top: 'kolicon-chevron-up',
+										bottom: 'kolicon-chevron-down',
 									}}
 									_label="Icons"
 								></KolButtonLink>
@@ -377,48 +378,48 @@ export const HandoutBasic: FC = () => {
 								_links={[
 									{
 										_label: 'Homepage',
-										_icons: 'codicon codicon-home',
+										_icons: 'fa-solid fa-house',
 										_href: '#/back-page',
 									},
 									{
 										_label: '2 Navigation point',
-										_icons: 'codicon codicon-home',
+										_icons: 'fa-solid fa-house',
 										_href: '#/back-page',
 									},
 									{
 										_active: true,
 										_label: '3 Navigation point',
 										_href: '#/back-page',
-										_icons: 'codicon codicon-home',
+										_icons: 'fa-solid fa-house',
 										_children: [
 											{
 												_label: '3.1 Navigation point',
-												_icons: 'codicon codicon-home',
+												_icons: 'fa-solid fa-house',
 												_href: '#/back-page',
 											},
 											{
 												_label: '3.2 External navigation point',
-												_icons: 'codicon codicon-home',
+												_icons: 'fa-solid fa-house',
 												_href: '#/back-page',
 												_target: '_blank',
 											},
 											{
 												_label: '3.3 Navigation point',
 												_href: '#/back-page',
-												_icons: 'codicon codicon-home',
+												_icons: 'fa-solid fa-house',
 												_children: [
 													{
 														_active: true,
 														_label: '3.3.1 Navigation point (active)',
-														_icons: 'codicon codicon-home',
+														_icons: 'fa-solid fa-house',
 														_href: '#/back-page',
 													},
-													{ _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
+													{ _label: '3.3.2 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },
 												],
 											},
 										],
 									},
-									{ _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#/back-page' },
+									{ _label: '3 Navigation point', _icons: 'fa-solid fa-house', _href: '#/back-page' },
 								]}
 								_hasCompactButton
 							/>
@@ -447,7 +448,7 @@ export const HandoutBasic: FC = () => {
 							<KolInputNumber _label={`Number input`} />
 							<KolInputDate _type="date" _label={`Date`} />
 							<KolInputEmail
-								_icons="{'left': 'codicon codicon-home'}"
+								_icons="{'left': 'fa-solid fa-house'}"
 								_msg={{ _type: 'error', _description: 'Test of an error message' }}
 								_touched
 								_label={`E-mail address`}
@@ -470,8 +471,8 @@ export const HandoutBasic: FC = () => {
 					</KolForm>
 				</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">
-						<KolTableStateful _label="Table" _minWidth="auto" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
+					<div slot="" className="grid gap-2 p-2 flex">
+						<KolTableStateful _label="Table" _minWidth="800px" _headers={TABLE_HEADERS} _data={TABLE_DATA} _pagination></KolTableStateful>
 					</div>
 				</KolCard>
 			</div>