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

package/src/components/link/target.tsx

@@ -25,13 +25,13 @@ export const LinkTarget: FC = () => (
 					<KolLink _href="#/back-page" _label="Link with target (_blank)" _target="_blank" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link without target" />
+					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link without target" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link with target (_self)" _target="_self" />
+					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_self)" _target="_self" />
 				</li>
 				<li>
-					<KolLink _href="#/back-page" _icons="codicon codicon-home" _hideLabel _label="Link with target (_blank)" _target="_blank" />
+					<KolLink _href="#/back-page" _icons="fa-solid fa-house" _hideLabel _label="Link with target (_blank)" _target="_blank" />
 				</li>
 			</ul>
 		</div>

package/src/components/nav/links.ts

@@ -3,7 +3,7 @@ import { ButtonOrLinkOrTextWithChildrenProps } from '@public-ui/components';
 export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -18,11 +18,11 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_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',
 			},
 			{
@@ -83,7 +83,7 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 	},
 	{
 		_label: '6 No own page, with icon',
-		_icons: 'codicon codicon-squirrel',
+		_icons: 'kolicon-kolibri',
 		_children: [
 			{
 				_label: '6.1 Nested link',
@@ -96,7 +96,7 @@ export const LINKS: ButtonOrLinkOrTextWithChildrenProps[] = [
 export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -111,7 +111,7 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: '3 Navigation point',
 		_href: '#/back-page',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 	},
 	{
 		_label: '4 Navigation point with children and onClick',
@@ -125,14 +125,14 @@ export const LINKS_WITHOUT_SUBMENU: ButtonOrLinkOrTextWithChildrenProps[] = [
 	},
 	{
 		_label: '6 No own page, with icon',
-		_icons: 'codicon codicon-squirrel',
+		_icons: 'kolicon-kolibri',
 	},
 ];
 
 export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_label: 'Homepage',
-		_icons: 'codicon codicon-home',
+		_icons: 'fa-solid fa-house',
 		_on: {
 			onClick: () => console.log('Homepage clicked'),
 		},
@@ -147,11 +147,11 @@ export const LINKS_SUB_ACTIVE: ButtonOrLinkOrTextWithChildrenProps[] = [
 	{
 		_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',
 			},
 			{

package/src/components/pagination/basic.tsx

@@ -20,7 +20,7 @@ export const PaginationBasic: FC = () => (
 			<KolPagination _max={4} _page={1} _siblingCount={0} _boundaryCount={2} _label="Test pagination 3" _on={{}} />
 			<KolPagination _max={4} _page={6} _siblingCount={0} _boundaryCount={2} _hasButtons={false} _label="Test pagination 4" _on={{}} />
 			<KolPagination
-				_max={4}
+				_max={400}
 				_page={6}
 				_siblingCount={0}
 				_boundaryCount={2}

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

@@ -17,19 +17,19 @@ export const PopoverButtonBasic: FC = () => {
 		{
 			type: 'button',
 			_label: 'Edit',
-			_icons: 'codicon codicon-edit',
+			_icons: 'fa-solid fa-pen',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'codicon codicon-trash',
+			_icons: 'fa-solid fa-trash',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Duplicate',
-			_icons: 'codicon codicon-copy',
+			_icons: 'fa-solid fa-copy',
 			_on: dummyEventHandler,
 		},
 	];
@@ -51,10 +51,10 @@ export const PopoverButtonBasic: FC = () => {
 				</p>
 			</SampleDescription>
 			<div className="flex flex-col gap-4">
-				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'codicon codicon-chevron-down' }} ref={buttonRef}>
+				<KolPopoverButton _label={'Actions'} _variant="primary" _icons={{ right: 'kolicon-chevron-down' }} ref={buttonRef}>
 					<KolToolbar _label="Action toolbar" _items={TOOLBAR_ITEMS} _orientation="vertical" />
 				</KolPopoverButton>
-				<KolPopoverButton _label="Help" _icons="codicon codicon-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+				<KolPopoverButton _label="Help" _icons="kolicon-alert-info" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 					<div className="w-sm p-2 border border-solid border-gray">
 						<KolHeading _label="Help Information" _level={0}></KolHeading>
 						<p>

package/src/components/popover-button/inline.tsx

@@ -17,7 +17,7 @@ export const PopoverButtonInline: FC = () => {
 				<p>
 					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur aut dolore dolores itaque praesentium reprehenderit sed voluptatum!
 					Exercitationem ipsa magni maiores modi, placeat quas quos reprehenderit rerum sit veniam vitae.
-					<KolPopoverButton _inline={true} _label="Help" _icons="codicon codicon-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
+					<KolPopoverButton _inline={true} _label="Help" _icons="fa-solid fa-circle-question" _popoverAlign="right" _tooltipAlign="bottom" _hideLabel>
 						<div className="w-sm p-2 border border-solid border-gray">
 							<KolHeading _label="Help Information" _level={0}></KolHeading>
 							<p>

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

@@ -54,10 +54,10 @@ export const SelectCases = forwardRef<HTMLKolSelectElement, Components.KolSelect
 				_label="Salutation"
 				_icons={{
 					left: {
-						icon: 'codicon codicon-arrow-left',
+						icon: 'kolicon-chevron-left',
 					},
 					right: {
-						icon: 'codicon codicon-arrow-right',
+						icon: 'kolicon-chevron-right',
 					},
 				}}
 			/>

package/src/components/single-select/partials/cases.tsx

@@ -39,7 +39,13 @@ export const SingleSelectCases = (props: Components.KolSingleSelect) => {
 			<KolSingleSelect {...props} _label="With access key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _accessKey="c" />
 			<KolSingleSelect {...props} _label="With short key" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _shortKey="s" />
 			<KolSingleSelect {...props} _label="With long labels" _options={LONG_OPTIONS as Option<StencilUnknown>[]} _placeholder="Placeholder" />
-			<KolSingleSelect {...props} _label="With hidden clear button" _options={COUNTRY_OPTIONS as Option<StencilUnknown>[]} _value={'de'} _hideClearButton />
+			<KolSingleSelect
+				{...props}
+				_label="With hidden clear button"
+				_options={COUNTRY_OPTIONS as Option<StencilUnknown>[]}
+				_value={'de'}
+				_hasClearButton={false}
+			/>
 			<KolSingleSelect
 				{...props}
 				_hint={HINT_MSG}

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

@@ -16,19 +16,19 @@ export const SplitButtonBasic: FC = () => {
 		{
 			type: 'button',
 			_label: 'Save',
-			_icons: 'codicon codicon-save',
+			_icons: 'fa-solid fa-floppy-disk',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Move',
-			_icons: 'codicon codicon-move',
+			_icons: 'fa-solid fa-arrows-up-down-left-right',
 			_on: dummyEventHandler,
 		},
 		{
 			type: 'button',
 			_label: 'Delete',
-			_icons: 'codicon codicon-trash',
+			_icons: 'fa-solid fa-trash',
 			_on: dummyEventHandler,
 		},
 	];

package/src/components/table/horizontal-scrollbar.tsx

@@ -14,8 +14,8 @@ const DATA = [{ small: 'Small Example', large: 'Larger Example' }];
 const HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
-			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '300px' },
 			{ label: 'Small Column', key: 'small', textAlign: 'left', width: '200px' },
+			{ label: 'Large Column', key: 'large', textAlign: 'left', width: '300px' },
 			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
 			{ label: 'Larger Column', key: 'large', textAlign: 'left', width: '400px' },
 		],

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

@@ -26,7 +26,7 @@ const getButtonHeaderCell = (variant: ButtonVariantPropType): KoliBriTableHeader
 			const commonProps = {
 				_label: capitalizedVariant,
 				_variant: variant,
-				_icons: { right: 'codicon codicon-squirrel' },
+				_icons: { right: 'kolicon-kolibri' },
 			};
 			getRoot(createReactRenderElement(element)).render(
 				cell.label === 'button' ? <KolButtonWrapper {...commonProps} /> : <KolLinkButton _href="#/back-page" {...commonProps} />,
@@ -91,7 +91,7 @@ export const InteractiveChildElements: FC = () => (
 								render: (element: HTMLElement, cell: KoliBriTableCell) => {
 									const commonProps = {
 										_label: cell.label,
-										_icons: { right: 'codicon codicon-squirrel' },
+										_icons: { right: 'kolicon-kolibri' },
 									};
 									getRoot(createReactRenderElement(element)).render(
 										cell.label === 'button-link' ? <KolButtonLink {...commonProps} /> : <KolLink _href="#/back-page" {...commonProps} />,

package/src/components/table/predefined-settings.tsx

@@ -14,26 +14,18 @@ export const PredefinedSettings: FC = () => {
 
 			<KolTableStateful
 				_label="Table for demonstration purposes with predefined settings"
-				_minWidth="auto"
 				_hasSettingsMenu
 				_headers={{
 					horizontal: [
 						[
-							{ label: 'column A', key: 'columnA' },
-							{ label: 'column B', key: 'columnB' },
-							{ label: 'column C', key: 'columnC' },
+							{ key: 'columnC', visible: true, label: 'Column C', width: '45ch' },
+							{ key: 'columnB', visible: true, label: 'Column B', width: '20ch' },
+							{ key: 'columnA', visible: false, label: 'Column A' },
 						],
 					],
 				}}
-				_tableSettings={{
-					columns: [
-						{ key: 'columnC', visible: true, label: 'Column C', width: 45 },
-						{ key: 'columnB', visible: true, label: 'Column B', width: 20 },
-						{ key: 'columnA', visible: false, label: 'Column A' },
-					],
-				}}
 				_data={DATA}
-				_min-width="500px"
+				_minWidth="500px"
 				className="block"
 				style={{ maxWidth: '600px' }}
 			/>

package/src/components/table/render-cell.tsx

@@ -99,7 +99,7 @@ const HEADERS: KoliBriTableHeaders = {
 							}}
 						>
 							<KolInputText _label="Input" />
-							<KolButtonWrapper label="Save" icons={{ left: 'codicon codicon-save' }} />
+							<KolButtonWrapper label="Save" icons={{ left: 'fa-solid fa-floppy-disk' }} />
 						</div>,
 					);
 				},

package/src/components/table/settings-column-options.tsx

@@ -33,23 +33,14 @@ export const TableSettingsColumnOptions: FC = () => (
 			_headers={{
 				horizontal: [
 					[
-						{ key: 'id', label: 'ID', hidable: false, sortable: false },
-						{ key: 'name', label: 'Name' },
-						{ key: 'team', label: 'Team', sortable: false },
-						{ key: 'email', label: 'E-Mail', resizable: false },
-						{ key: 'status', label: 'Status', hidable: false, resizable: false },
+						{ key: 'id', label: 'ID', hidable: false, sortable: false, visible: true, width: '15ch' },
+						{ key: 'name', label: 'Name', visible: true, width: '30ch' },
+						{ key: 'team', label: 'Team', sortable: false, visible: true, width: '20ch' },
+						{ key: 'email', label: 'E-Mail', resizable: false, visible: true, width: '25ch' },
+						{ key: 'status', label: 'Status', hidable: false, resizable: false, visible: true, width: '10ch' },
 					],
 				],
 			}}
-			_tableSettings={{
-				columns: [
-					{ hidable: false, key: 'id', label: 'ID', sortable: false, visible: true, width: 15 },
-					{ key: 'name', label: 'Name', visible: true, width: 30 },
-					{ key: 'team', label: 'Team', sortable: false, visible: true, width: 20 },
-					{ key: 'email', label: 'E-Mail', resizable: false, visible: true, width: 25 },
-					{ hidable: false, key: 'status', label: 'Status', resizable: false, visible: true, width: 10 },
-				],
-			}}
 			_data={DATA}
 			className="block"
 			style={{ maxWidth: '720px' }}

package/src/components/tabs/align.tsx

@@ -7,7 +7,7 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
@@ -16,16 +16,16 @@ const tabs = [
 		},
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Disabled Tab',
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Last tab',
 	},
 ];

package/src/components/tabs/basic.tsx

@@ -6,7 +6,7 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
@@ -15,16 +15,16 @@ const tabs = [
 		},
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Disabled Tab',
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Last tab',
 	},
 ];

package/src/components/tabs/behavior.tsx

@@ -6,7 +6,7 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'First tab',
 		_on: {
 			onSelect: (event: Event) => {
@@ -15,16 +15,16 @@ const tabs = [
 		},
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Second Tab',
 	},
 	{
 		_disabled: true,
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Disabled Tab',
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Last tab',
 	},
 ];

package/src/components/tabs/icons-only.tsx

@@ -6,23 +6,23 @@ import { SampleDescription } from '../SampleDescription';
 
 const tabs = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'First Tab',
 		_hideLabel: true,
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Second Tab',
 		_hideLabel: true,
 	},
 	{
 		_disabled: true,
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Disabled Tab',
 		_hideLabel: true,
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Last Tab',
 		_hideLabel: true,
 	},

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

@@ -11,9 +11,10 @@ export const TextareaCases = forwardRef<HTMLKolTextareaElement, Components.KolTe
 				<KolTextarea {...props} ref={ref} _placeholder="Placeholder" _label="Text" />
 			</div>
 			<KolTextarea {...props} _placeholder="Placeholder" _required _msg={{ _type: 'error', _description: ERROR_MSG }} _label="Text" _touched _hint={HINT_MSG} />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} />
-			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'info', _description: 'Just a hint' }} _touched />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'warning', _description: 'Small warning' }} _touched />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'success', _description: 'Success message' }} _touched />
+			<KolTextarea {...props} _placeholder="Placeholder" _label="Text" _msg={{ _type: 'default', _description: 'Default message' }} _touched />
 			<KolTextarea {...props} ref={ref} _accessKey="T" _label="Text (3 rows)" _rows={3} />
 			<KolTextarea {...props} ref={ref} _label="Text (placeholder)" _rows={3} _placeholder="Placeholder" />
 			<KolTextarea {...props} ref={ref} _label="Text (disabled & placeholder)" _rows={3} _placeholder="Placeholder" _disabled />

package/src/components/toast/basic.tsx

@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';
-import { KolButton } from '@public-ui/react-v19';
+import { KolAlert, KolButton, KolLink } from '@public-ui/react-v19';
 
 import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
@@ -75,9 +75,15 @@ export const ToastBasic: FC = () => {
 
 	return (
 		<>
+			<KolAlert _label="Component is DEPRECATED" _type="error" _variant="card" className="header-alert">
+				For more information, please refer&nbsp;
+				<KolLink _href="https://public-ui.github.io/docs/components/toaster" _target="_blank" _label="to the documentation"></KolLink>.
+			</KolAlert>
+
 			<SampleDescription>
 				<p>This sample demonstrates the toast service with all its options.</p>
 			</SampleDescription>
+
 			<section className="grid gap-4">
 				<div className="flex flex-wrap gap-2">
 					<KolButton _label="Show simple toast" _on={{ onClick: handleButtonClickSimple }}></KolButton>

package/src/components/toast/configurator.tsx

@@ -3,7 +3,7 @@ import { useSearchParams } from 'react-router-dom';
 
 import type { AlertTypePropType } from '@public-ui/components';
 import { ToasterService } from '@public-ui/components';
-import { KolButton, KolInputRadio } from '@public-ui/react-v19';
+import { KolAlert, KolButton, KolInputRadio, KolLink } from '@public-ui/react-v19';
 
 import { SampleDescription } from '../SampleDescription';
 
@@ -66,6 +66,10 @@ export const ToastConfigurator: FC = () => {
 
 	return (
 		<>
+			<KolAlert _label="Component is DEPRECATED" _type="error" _variant="card" className="header-alert">
+				For more information, please refer&nbsp;
+				<KolLink _href="https://public-ui.github.io/docs/components/toaster" _target="_blank" _label="to the documentation"></KolLink>.
+			</KolAlert>
 			<SampleDescription>
 				<p>
 					This sample demonstrates the toast service with all its options. Use the configuration below to choose a toast type and open a toast with the card

package/src/components/toolbar/basic.tsx

@@ -12,7 +12,7 @@ export const ToolbarBasic: FC = () => {
 			_hideLabel: true,
 			_icons: {
 				left: {
-					icon: 'codicon codicon-arrow-left',
+					icon: 'kolicon-chevron-left',
 				},
 			},
 		},
@@ -22,7 +22,7 @@ export const ToolbarBasic: FC = () => {
 			_hideLabel: true,
 			_icons: {
 				right: {
-					icon: 'codicon codicon-arrow-right',
+					icon: 'kolicon-chevron-right',
 				},
 			},
 		},

package/src/components/toolbar/disabled.tsx

@@ -21,7 +21,7 @@ export const ToolbarDisabled: FC = () => {
 						_hideLabel: true,
 						_icons: {
 							left: {
-								icon: 'codicon codicon-arrow-left',
+								icon: 'kolicon-chevron-left',
 							},
 						},
 					},
@@ -31,7 +31,7 @@ export const ToolbarDisabled: FC = () => {
 						_hideLabel: true,
 						_icons: {
 							right: {
-								icon: 'codicon codicon-arrow-right',
+								icon: 'kolicon-chevron-right',
 							},
 						},
 					},

package/src/scenarios/custom-tooltip-css-properties.tsx

@@ -26,16 +26,10 @@ export const CustomTooltipCssProperties: FC = () => {
 					_label="Custom duration"
 					_hideLabel
 					style={{ '--kolibri-tooltip-animation-duration': '2500ms' }}
-					_icons="codicon codicon-clock"
-					_on={dummyEventHandler}
-				></KolButton>
-				<KolButton
-					_label="Custom width"
-					_hideLabel
-					style={{ '--kol-tooltip-width': '400px' }}
-					_icons="codicon codicon-arrow-both"
+					_icons="fa-solid fa-clock"
 					_on={dummyEventHandler}
 				></KolButton>
+				<KolButton _label="Custom width" _hideLabel style={{ '--kol-tooltip-width': '400px' }} _icons="kolicon-chevron-up" _on={dummyEventHandler}></KolButton>
 			</div>
 		</>
 	);

package/src/scenarios/disabled-interactive-elements.tsx

@@ -63,32 +63,32 @@ export const DisabledInteractiveElements: FC = () => {
 					<div className="flex flex-wrap gap-4">
 						<KolButton _label="Label" _on={dummyEventHandler} />
 						<KolButton _disabled _label="Label" _on={dummyEventHandler} />
-						<KolButton _hideLabel _icons="codicon codicon-home" _label="Label" _on={dummyEventHandler} />
-						<KolButton _disabled _hideLabel _icons="codicon codicon-home" _label="Label" _on={dummyEventHandler} />
+						<KolButton _hideLabel _icons="fa-solid fa-house" _label="Label" _on={dummyEventHandler} />
+						<KolButton _disabled _hideLabel _icons="fa-solid fa-house" _label="Label" _on={dummyEventHandler} />
 					</div>
 				</KolCard>
 				<KolCard _label="ButtonLink" _level={0}>
 					<div className="flex flex-wrap gap-4">
 						<KolButtonLink _label="Label" />
 						<KolButtonLink _disabled _label="Label" />
-						<KolButtonLink _hideLabel _icons="codicon codicon-home" _label="Label" />
-						<KolButtonLink _hideLabel _icons="codicon codicon-home" _disabled _label="Label" />
+						<KolButtonLink _hideLabel _icons="fa-solid fa-house" _label="Label" />
+						<KolButtonLink _hideLabel _icons="fa-solid fa-house" _disabled _label="Label" />
 					</div>
 				</KolCard>
 				<KolCard _label="Link" _level={0}>
 					<div className="flex flex-wrap gap-4">
 						<KolLink _href="#" _label="Label" />
 						<KolLink _disabled _href="#" _label="Label" />
-						<KolLink _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-						<KolLink _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+						<KolLink _hideLabel _href="#" _icons="fa-solid fa-house" _label="Label" />
+						<KolLink _disabled _hideLabel _href="#" _icons="fa-solid fa-house" _label="Label" />
 					</div>
 				</KolCard>
 				<KolCard _label="LinkButton" _level={0}>
 					<div className="flex flex-wrap gap-4">
 						<KolLinkButton _href="#" _label="Label" />
 						<KolLinkButton _disabled _href="#" _label="Label" />
-						<KolLinkButton _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
-						<KolLinkButton _disabled _hideLabel _href="#" _icons="codicon codicon-home" _label="Label" />
+						<KolLinkButton _hideLabel _href="#" _icons="fa-solid fa-house" _label="Label" />
+						<KolLinkButton _disabled _hideLabel _href="#" _icons="fa-solid fa-house" _label="Label" />
 					</div>
 				</KolCard>
 				<KolCard _label="Accordion" _level={0}>

package/src/scenarios/horizontal-scrollbar-advanced/TableHorizontalScrollbarAdvanced.tsx

@@ -9,21 +9,21 @@ import './layout.scss';
 
 const TABS: TabButtonProps[] = [
 	{
-		_icons: 'codicon codicon-pie-chart',
+		_icons: 'fa-solid fa-chart-pie',
 		_label: 'Erster Tab',
 	},
 	{
-		_icons: 'codicon codicon-calendar',
+		_icons: 'fa-solid fa-calendar',
 		_label: 'Zweiter Tab',
 		_disabled: true,
 	},
 	{
-		_icons: 'codicon codicon-briefcase',
+		_icons: 'fa-solid fa-briefcase',
 		_label: 'Deaktivierter Tab',
 		_disabled: true,
 	},
 	{
-		_icons: 'codicon codicon-telescope',
+		_icons: 'fa-solid fa-address-card',
 		_label: 'Letzter Tab',
 		_disabled: true,
 	},