@public-ui/sample-react 1.7.0-rc.15 → 1.7.0-rc.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/sample-react",
-  "version": "1.7.0-rc.15",
+  "version": "1.7.0-rc.17",
   "description": "This app contains samples for the KoliBri/Public UI",
   "license": "EUPL-1.2",
   "dependencies": {
@@ -8,14 +8,14 @@
     "@leanup/stack-react": "1.3.48",
     "@leanup/stack-webpack": "1.3.48",
     "@public-oss/kolibri-themes": "0.0.3",
-    "@public-ui/components": "1.7.0-rc.15",
-    "@public-ui/react": "1.7.0-rc.15",
-    "@public-ui/themes": "1.7.0-rc.15",
-    "@types/node": "20.6.5",
-    "@types/react": "18.2.22",
-    "@types/react-dom": "18.2.7",
-    "@unocss/preset-uno": "0.56.2",
-    "@unocss/webpack": "0.56.2",
+    "@public-ui/components": "1.7.0-rc.17",
+    "@public-ui/react": "1.7.0-rc.17",
+    "@public-ui/themes": "1.7.0-rc.17",
+    "@types/node": "20.7.1",
+    "@types/react": "18.2.23",
+    "@types/react-dom": "18.2.8",
+    "@unocss/preset-uno": "0.56.4",
+    "@unocss/webpack": "0.56.4",
     "ajv": "8.12.0",
     "chromedriver": "116.0.0",
     "cpy-cli": "5.0.0",

package/src/components/FocusInput.tsx

@@ -1,56 +1,20 @@
-import { KolButton, KolForm } from '@public-ui/react';
 import React, { FC, useLayoutEffect, useRef } from 'react';
-import { InputCheckboxVariants } from './input-checkbox/partials/variants';
-import { InputColorVariants } from './input-color/partials/variants';
-import { InputDateVariants } from './input-date/partials/variants';
-import { InputEmailVariants } from './input-email/partials/variants';
-import { InputFileVariants } from './input-file/partials/variants';
-import { InputNumberVariants } from './input-number/partials/variants';
-import { InputPasswordVariants } from './input-password/partials/variants';
-import { InputRadioVariants } from './input-radio/partials/variants';
-import { InputRangeVariants } from './input-range/partials/variants';
-import { InputTextVariants } from './input-text/partials/variants';
-import { SelectVariants } from './select/partials/variants';
-import { TextareaVariants } from './textarea/partials/variants';
+import { RefComponent } from './types';
 
-type Props = {
-	RefInput:
-		| typeof InputCheckboxVariants
-		| typeof InputColorVariants
-		| typeof InputDateVariants
-		| typeof InputEmailVariants
-		| typeof InputFileVariants
-		| typeof InputNumberVariants
-		| typeof InputPasswordVariants
-		| typeof InputRadioVariants
-		| typeof InputRangeVariants
-		| typeof InputTextVariants
-		| typeof SelectVariants
-		| typeof TextareaVariants;
-	props?: Record<string, unknown>;
-};
+type FokusElementProps = {
+	RefComponent: RefComponent;
+} & Record<string, unknown>;
 
-export const FocusInput: FC<Props> = ({ RefInput, props }) => {
+export const FocusElement: FC<FokusElementProps> = (props) => {
 	const ref = useRef(null);
 
 	useLayoutEffect(() => {
 		setTimeout(() => {
-			if (ref.current) {
+			if (ref.current && window.self === window.top) {
 				(ref.current as unknown as HTMLElement).focus();
 			}
 		}, 500);
 	}, [ref]);
 
-	return (
-		<KolForm>
-			<div className="grid gap-4">
-				<RefInput ref={ref} {...props} />
-				<div className="flex gap-4">
-					<KolButton _label="Submit" _icon="codicon codicon-arrow-right" _type="submit" _variant="primary" />
-					<KolButton _label="Reset" _type="reset" _variant="tertiary" />
-					<KolButton _label="Help" _type="button" _variant="ghost" />
-				</div>
-			</div>
-		</KolForm>
-	);
+	return <props.RefComponent ref={ref} {...props} />;
 };

package/src/components/FormWrap.tsx

@@ -0,0 +1,21 @@
+import { KolButton, KolForm } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FocusElement } from './FocusInput';
+import { RefFormComponent } from './types';
+
+type FormWrapProps = {
+	RefComponent: RefFormComponent;
+} & Record<string, unknown>;
+
+export const FormWrap: FC<FormWrapProps> = (props) => (
+	<KolForm>
+		<div className="grid gap-4">
+			<FocusElement {...props} />
+			<div className="flex gap-4">
+				<KolButton _label="Submit" _icons="codicon codicon-arrow-right" _type="submit" _variant="primary" />
+				<KolButton _label="Reset" _type="reset" _variant="tertiary" />
+				<KolButton _label="Help" _type="button" _variant="ghost" />
+			</div>
+		</div>
+	</KolForm>
+);

package/src/components/Sidebar.tsx

@@ -65,11 +65,11 @@ export const Sidebar: FC<Props> = ({ version, theme, routes, routeList, sample,
 
 			<KolHeading _label="Komponenten" _level={2} className="block mt"></KolHeading>
 			<div className="flex flex-justify-between flex-items-center mt">
-				<KolButton _icon="codicon codicon-arrow-left" _hideLabel _label="Vorherige Komponente auswählen" _on={{ onClick: handlePreviousClick }} />
+				<KolButton _icons="codicon codicon-arrow-left" _hideLabel _label="Vorherige Komponente auswählen" _on={{ onClick: handlePreviousClick }} />
 				<span className="text-center">
 					{formatSampleAsLabel()} ({getIndexOfSample() + 1}/{routeList.length})
 				</span>
-				<KolButton _icon="codicon codicon-arrow-right" _hideLabel _label="Nächste Komponente auswählen" _on={{ onClick: handleNextClick }} />
+				<KolButton _icons="codicon codicon-arrow-right" _hideLabel _label="Nächste Komponente auswählen" _on={{ onClick: handleNextClick }} />
 			</div>
 
 			<ComponentNavContainer isMobile={isMobile}>

package/src/components/badge/button.tsx

@@ -6,7 +6,7 @@ import { FC } from 'react';
 const PROPS = {
 	_label: 'Label',
 	_smartButton: {
-		_icon: 'codicon codicon-close',
+		_icons: 'codicon codicon-close',
 		_label: 'Entfernen',
 		_on: {
 			onClick: () => alert('clicked'),

package/src/components/breadcrumb/basic.tsx

@@ -21,7 +21,7 @@ export const BreadcrumbBasic: FC = () => (
 			_links={[
 				{
 					_label: 'Startseite',
-					_icon: 'codicon codicon-home',
+					_icons: 'codicon codicon-home',
 					_hideLabel: true,
 					_href: '#/',
 				},
@@ -38,7 +38,7 @@ export const BreadcrumbBasic: FC = () => (
 		<KolBreadcrumb
 			_ariaLabel="Breadcrumb aus Icons- und Text-Links"
 			_links={[
-				{ _label: 'Startseite', _icon: 'codicon codicon-home', _href: '#/' },
+				{ _label: 'Startseite', _icons: 'codicon codicon-home', _href: '#/' },
 				{
 					_label: 'Unterseite der Startseite und ich_bin_ein_echt_langes_zusammengesetztes_Worte_und_versuche_das_Layout_zu_brechen',
 					_href: '#/unterseite',

package/src/components/button/basic.tsx

@@ -1,29 +1,5 @@
-import React from 'react';
-import { KolButton } from '@public-ui/react';
+import React, { FC } from 'react';
+import { FocusElement } from '../FocusInput';
+import { ButtonVariants } from './partials/variants';
 
-import { FC } from 'react';
-
-const ARGS = {
-	_on: {
-		onClick: (_event, _value) => alert('Klick!'),
-	},
-};
-
-export const ButtonBasic: FC = () => (
-	<div className="grid gap-14">
-		<div className="flex flex-wrap gap-14">
-			<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-14">
-			<KolButton _disabled _label="Primary" _variant="primary"></KolButton>
-			<KolButton _disabled _label="Secondary" _variant="secondary"></KolButton>
-			<KolButton _disabled _label="Normal" _variant="normal"></KolButton>
-			<KolButton _disabled _label="Danger" _variant="danger"></KolButton>
-			<KolButton _disabled _label="Ghost" _variant="ghost"></KolButton>
-		</div>
-	</div>
-);
+export const ButtonBasic: FC = () => <FocusElement RefComponent={ButtonVariants} />;

package/src/components/button/hide-label.tsx

@@ -4,7 +4,7 @@ import { KolButton } from '@public-ui/react';
 import { FC } from 'react';
 
 const ARGS = {
-	_icon: 'codicon codicon-home',
+	_icons: 'codicon codicon-home',
 	_hideLabel: true,
 	_on: {
 		onClick: (_event, _value) => alert('Klick!'),

package/src/components/button/icons.tsx

@@ -5,7 +5,7 @@ import { FC } from 'react';
 
 export const ButtonIcons: FC = () => (
 	<KolButton
-		_icon={{
+		_icons={{
 			bottom: 'codicon codicon-arrow-down',
 			left: {
 				icon: 'codicon codicon-arrow-left',

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

@@ -0,0 +1,16 @@
+import { Components } from '@public-ui/components';
+import { KolButton } from '@public-ui/react';
+import React, { forwardRef } from 'react';
+
+export const ButtonCases = forwardRef<HTMLKolButtonElement, Components.KolButton>(function InputCheckboxCases(props, ref) {
+	return (
+		<div className="flex flex-wrap gap-4">
+			<KolButton {...props} _icons="codicon codicon-home" _label="Primary" _variant="primary"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-heart" _label="Secondary" _variant="secondary"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-hubot" _label="Normal" _variant="normal"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-hubot" _label="Tertiary" _variant="tertiary"></KolButton>
+			<KolButton {...props} _icons="codicon codicon-trash" _label="Danger" _variant="danger"></KolButton>
+			<KolButton ref={ref} {...props} _icons="codicon codicon-reactions" _label="Ghost" _variant="ghost"></KolButton>
+		</div>
+	);
+});

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

@@ -0,0 +1,27 @@
+import { Components } from '@public-ui/components';
+import React, { forwardRef } from 'react';
+import { ButtonCases } from './cases';
+
+export const ButtonVariants = forwardRef<HTMLKolButtonElement, Components.KolButton>(function InputCheckboxVariant(props, ref) {
+	return (
+		<div className="grid gap-4">
+			<h1>Button</h1>
+			<section>
+				<h2>Button</h2>
+				<ButtonCases {...props} />
+			</section>
+			<section>
+				<h2>Button (disabled)</h2>
+				<ButtonCases {...props} _disabled />
+			</section>
+			<section>
+				<h2>Button (hideLabel)</h2>
+				<ButtonCases ref={ref} {...props} _hideLabel />
+			</section>
+			<section>
+				<h2>Button (disabled, hideLabel)</h2>
+				<ButtonCases {...props} _disabled _hideLabel />
+			</section>
+		</div>
+	);
+});

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

@@ -7,7 +7,7 @@ export const ButtonGroupBasic: FC = () => (
 	<KolButtonGroup>
 		<KolButton _label="Active" _variant="primary"></KolButton>
 		<KolButton _label="Not active" _disabled></KolButton>
-		<KolButton _label="Active" _icon="codicon codicon-home" _variant="danger"></KolButton>
-		<KolButton _label="Active" _icon="codicon codicon-trash" _hideLabel _variant="ghost"></KolButton>
+		<KolButton _label="Active" _icons="codicon codicon-home" _variant="danger"></KolButton>
+		<KolButton _label="Active" _icons="codicon codicon-trash" _hideLabel _variant="ghost"></KolButton>
 	</KolButtonGroup>
 );

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

@@ -5,27 +5,27 @@ import { FC } from 'react';
 
 export const ButtonLinkIcons: FC = () => (
 	<div className="grid gap-4">
-		<KolButtonLink _icon="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
+		<KolButtonLink _icons="codicon codicon-home" _label="Ich bin ein Link mit Icon links" />
 		<KolButtonLink
-			_icon={{
+			_icons={{
 				right: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon rechts"
 		/>
 		<KolButtonLink
-			_icon={{
+			_icons={{
 				top: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon oben"
 		/>
 		<KolButtonLink
-			_icon={{
+			_icons={{
 				bottom: 'codicon codicon-home',
 			}}
 			_label="Ich bin ein Link mit Icon unten"
 		/>
 		<KolButtonLink
-			_icon={{
+			_icons={{
 				top: 'codicon codicon-home',
 				right: 'codicon codicon-home',
 				bottom: 'codicon codicon-home',

package/src/components/handout/basic.tsx

@@ -785,56 +785,56 @@ export const HandoutBasic: FC = () => (
 					<KolTabs _ariaLabel="" _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 _icon={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolButton>
-								<KolButton _disabled _icon={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolButton>
-								<KolButton _hideLabel _icon="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolButton>
+								<KolButton _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolButton>
+								<KolButton _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolButton>
+								<KolButton _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolButton _icon={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolButton>
-								<KolButton _disabled _icon={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolButton>
-								<KolButton _hideLabel _icon="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolButton>
+								<KolButton _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolButton>
+								<KolButton _disabled _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolButton>
+								<KolButton _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolButton _icon={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolButton>
-								<KolButton _disabled _icon={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolButton>
-								<KolButton _hideLabel _icon="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolButton>
+								<KolButton _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolButton>
+								<KolButton _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolButton>
+								<KolButton _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolButton _icon={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolButton>
-								<KolButton _disabled _icon={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolButton>
-								<KolButton _hideLabel _icon="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolButton>
+								<KolButton _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolButton>
+								<KolButton _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolButton>
+								<KolButton _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></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 _icon="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolButton>
+								<KolButton _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></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="#" _icon={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icon={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icon="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#" _disabled _icons={{ left: 'codicon codicon-arrow-left' }} _label="primary" _variant="primary"></KolLinkButton>
+								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-left" _label="primary" _variant="primary"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icon={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icon={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icon="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#" _disabled _icons={{ right: 'codicon codicon-arrow-right' }} _label="secondary" _variant="secondary"></KolLinkButton>
+								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-right" _label="secondary" _variant="secondary"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icon={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icon={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icon="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#" _disabled _icons={{ top: 'codicon codicon-arrow-up' }} _label="danger" _variant="danger"></KolLinkButton>
+								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-up" _label="danger" _variant="danger"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
-								<KolLinkButton _href="#" _icon={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-								<KolLinkButton _href="#" _disabled _icon={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
-								<KolLinkButton _href="#" _hideLabel _icon="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#" _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#" _disabled _icons={{ bottom: 'codicon codicon-arrow-down' }} _label="normal" _variant="normal"></KolLinkButton>
+								<KolLinkButton _href="#" _hideLabel _icons="codicon codicon-arrow-down" _label="normal" _variant="normal"></KolLinkButton>
 							</div>
 							<div className="grid gap-2 grid-cols-[4fr_4fr_1fr] justify-items-center">
 								<KolLinkButton _href="#" _label="ghost" _variant="ghost"></KolLinkButton>
 								<KolLinkButton _href="#" _disabled _label="ghost" _variant="ghost"></KolLinkButton>
-								<KolLinkButton _href="#" _icon="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
+								<KolLinkButton _href="#" _icons="codicon codicon-home" _hideLabel _label="ghost" _variant="ghost"></KolLinkButton>
 							</div>
 						</div>
 					</KolTabs>
@@ -845,8 +845,8 @@ export const HandoutBasic: FC = () => (
 					<KolAccordion _heading="Links" _level={3} _open>
 						<div className="grid gap-2" slot="content">
 							<KolLink _href="#" _label="Linktext"></KolLink>
-							<KolLink _href="#" _icon="codicon codicon-home" _label="Linktext mit Icon"></KolLink>
-							<KolLink _href="#" _icon="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolLink>
+							<KolLink _href="#" _icons="codicon codicon-home" _label="Linktext mit Icon"></KolLink>
+							<KolLink _href="#" _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolLink>
 							<KolLink _href="/" _label="Besuchter Link"></KolLink>
 							<p>
 								Ich bin ein <KolLink _href="#" _label="externer Link" _target="w3c"></KolLink> im Fließtext.
@@ -859,8 +859,8 @@ export const HandoutBasic: FC = () => (
 					<KolAccordion _heading="ButtonLinks" _level={3}>
 						<div className="grid gap-2" slot="content">
 							<KolButtonLink _label="Linktext"></KolButtonLink>
-							<KolButtonLink _icon="codicon codicon-home" _label="Linktext mit Icon"></KolButtonLink>
-							<KolButtonLink _icon="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolButtonLink>
+							<KolButtonLink _icons="codicon codicon-home" _label="Linktext mit Icon"></KolButtonLink>
+							<KolButtonLink _icons="codicon codicon-home" _hideLabel _label="Linktext nur mit Icon"></KolButtonLink>
 							<p>
 								Ich bin ein <KolButtonLink _label="Link"></KolButtonLink> im Fließtext.
 							</p>
@@ -868,7 +868,7 @@ export const HandoutBasic: FC = () => (
 								<KolLogo slot="expert" class="inline-flex w-50" _org={Bundesanstalt['Informationstechnikzentrum Bund']} />
 							</KolButtonLink>
 							<KolButtonLink
-								_icon={{
+								_icons={{
 									left: 'codicon codicon-arrow-left',
 									right: 'codicon codicon-arrow-right',
 									top: 'codicon codicon-arrow-up',
@@ -905,48 +905,48 @@ export const HandoutBasic: FC = () => (
 							_links={[
 								{
 									_label: 'Homepage',
-									_icon: 'codicon codicon-home',
+									_icons: 'codicon codicon-home',
 									_href: '#/',
 								},
 								{
 									_label: '2 Navigation point',
-									_icon: 'codicon codicon-home',
+									_icons: 'codicon codicon-home',
 									_href: '#/untermenu',
 								},
 								{
 									_active: true,
 									_label: '3 Navigation point',
 									_href: '#abc',
-									_icon: 'codicon codicon-home',
+									_icons: 'codicon codicon-home',
 									_children: [
 										{
 											_label: '3.1 Navigation point',
-											_icon: 'codicon codicon-home',
+											_icons: 'codicon codicon-home',
 											_href: '#/',
 										},
 										{
 											_label: '3.2 External navigation point',
-											_icon: 'codicon codicon-home',
+											_icons: 'codicon codicon-home',
 											_href: '#abc',
 											_target: '_blank',
 										},
 										{
 											_label: '3.3 Navigation point',
 											_href: '#abc',
-											_icon: 'codicon codicon-home',
+											_icons: 'codicon codicon-home',
 											_children: [
 												{
 													_active: true,
 													_label: '3.3.1 Navigation point (active)',
-													_icon: 'codicon codicon-home',
+													_icons: 'codicon codicon-home',
 													_href: '#abc',
 												},
-												{ _label: '3.3.2 Navigation point', _icon: 'codicon codicon-home', _href: '#abc' },
+												{ _label: '3.3.2 Navigation point', _icons: 'codicon codicon-home', _href: '#abc' },
 											],
 										},
 									],
 								},
-								{ _label: '3 Navigation point', _icon: 'codicon codicon-home', _href: '#abc' },
+								{ _label: '3 Navigation point', _icons: 'codicon codicon-home', _href: '#abc' },
 							]}
 							_hasCompactButton
 						/>
@@ -975,7 +975,7 @@ export const HandoutBasic: FC = () => (
 						<KolInputFile>Datei hochladen</KolInputFile>
 						<KolInputNumber>Zahleneingabe</KolInputNumber>
 						<KolInputDate _type="date">Datum</KolInputDate>
-						<KolInputEmail _icon="{'left': 'codicon codicon-home'}" _error="Test einer Fehlermeldung" _touched>
+						<KolInputEmail _icons="{'left': 'codicon codicon-home'}" _error="Test einer Fehlermeldung" _touched>
 							E-Mail-Adresse
 						</KolInputEmail>
 						<KolInputText _hint="Ich bin ein Hinweis.">Vorname</KolInputText>

package/src/components/heading/badged.tsx

@@ -6,22 +6,22 @@ import { FC } from 'react';
 export const HeadingBadged: FC = () => (
 	<div className="grid gap-4">
 		<KolHeading _label="" _level={1}>
-			Eine Überschrift mit einem <KolBadge _color="red" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#f00" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={2}>
-			Eine Überschrift mit einem <KolBadge _color="green" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#0f0" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={3}>
-			Eine Überschrift mit einem <KolBadge _color="blue" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#00f" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={4}>
-			Eine Überschrift mit einem <KolBadge _color="purple" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#800080" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={5}>
-			Eine Überschrift mit einem <KolBadge _color="yellow" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#ff0" _label="Label"></KolBadge>
 		</KolHeading>
 		<KolHeading _label="" _level={6}>
-			Eine Überschrift mit einem <KolBadge _color="pink" _label="Label"></KolBadge>
+			Eine Überschrift mit einem <KolBadge _color="#ffc0cb" _label="Label"></KolBadge>
 		</KolHeading>
 	</div>
 );

package/src/components/icon/basic.tsx

@@ -5,13 +5,13 @@ import { FC } from 'react';
 
 export const IconBasic: FC = () => (
 	<div className="grid gap-4">
-		<KolIcon _ariaLabel="" _icon="codicon codicon-home" />
+		<KolIcon _ariaLabel="" _icons="codicon codicon-home" />
 		<KolIcon
 			style={{
 				color: 'red',
 			}}
 			_ariaLabel=""
-			_icon="codicon codicon-home"
+			_icons="codicon codicon-home"
 		/>
 	</div>
 );

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

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
+import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
-import { FocusInput } from '../FocusInput';
 
-export const InputCheckboxBasic: FC = () => <FocusInput RefInput={InputCheckboxVariants} />;
+export const InputCheckboxBasic: FC = () => <FormWrap RefComponent={InputCheckboxVariants} />;

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

@@ -1,12 +1,5 @@
 import React, { FC } from 'react';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 import { InputCheckboxVariants } from './partials/variants';
 
-export const InputCheckboxButton: FC = () => (
-	<FocusInput
-		RefInput={InputCheckboxVariants}
-		props={{
-			_variant: 'button',
-		}}
-	/>
-);
+export const InputCheckboxButton: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="button" />;

package/src/components/input-checkbox/partials/cases.tsx

@@ -10,7 +10,7 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 		<div className="grid gap-4">
 			<KolInputCheckbox
 				{...props}
-				_icon={{
+				_icons={{
 					unchecked: 'codicon codicon-close',
 				}}
 				_label="Nicht ausgewählt"
@@ -18,7 +18,7 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			/>
 			<KolInputCheckbox
 				{...props}
-				_icon={{
+				_icons={{
 					unchecked: 'codicon codicon-close',
 				}}
 				_label="Unbestimmt (Indeterminate)"
@@ -29,7 +29,7 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 				{...props}
 				ref={ref}
 				_checked
-				_icon={{
+				_icons={{
 					unchecked: 'codicon codicon-close',
 				}}
 				_label="Ausgewählt"
@@ -39,7 +39,7 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox
 				{...props}
 				_disabled
-				_icon={{
+				_icons={{
 					unchecked: 'codicon codicon-close',
 				}}
 				_label="Disabled"
@@ -49,7 +49,7 @@ export const InputCheckboxCases = forwardRef<HTMLKolInputCheckboxElement, Compon
 			<KolInputCheckbox
 				{...props}
 				_error={ERROR_MSG}
-				_icon={{
+				_icons={{
 					unchecked: 'codicon codicon-close',
 				}}
 				_label="Mit Fehler"

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

@@ -1,12 +1,5 @@
 import React, { FC } from 'react';
 import { InputCheckboxVariants } from './partials/variants';
-import { FocusInput } from '../FocusInput';
+import { FormWrap } from '../FormWrap';
 
-export const InputCheckboxSwitch: FC = () => (
-	<FocusInput
-		RefInput={InputCheckboxVariants}
-		props={{
-			_variant: 'switch',
-		}}
-	/>
-);
+export const InputCheckboxSwitch: FC = () => <FormWrap RefComponent={InputCheckboxVariants} _variant="switch" />;