From 89bc41e55784e2781330f96ecc52fd306d2e2549 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Fri, 16 Feb 2024 16:03:05 +0100
Subject: [PATCH 01/24] Allow multiple KoliBri instances, remove reference on
 window

---
 packages/components/src/utils/dev.utils.ts | 42 +++++++++-------------
 packages/components/stencil.config.ts      |  2 +-
 2 files changed, 17 insertions(+), 27 deletions(-)

diff --git a/packages/components/src/utils/dev.utils.ts b/packages/components/src/utils/dev.utils.ts
index 8d129ffa46..407016ea5c 100644
--- a/packages/components/src/utils/dev.utils.ts
+++ b/packages/components/src/utils/dev.utils.ts
@@ -3,6 +3,8 @@ import { Log, getDocument, processEnv, setColorContrastAnalysis, setDevMode, set
 import { getWindow, setDocument, setWindow } from '@public-ui/schema';
 import { ModalService } from '../components/modal/service';
 
+const kolibriInstance = {};
+
 export const configKoliBri = (window: Window): void => {
 	if (window instanceof Window) {
 		setWindow(window);
@@ -29,28 +31,19 @@ const initMeta = (): void => {
 };
 
 const getKoliBri = (): Record<string, unknown> => {
-	let kolibri = getWindow().KoliBri;
-	if (kolibri === undefined) {
-		kolibri = {};
-		Object.defineProperty(getWindow(), 'KoliBri', {
-			value: kolibri,
-			writable: false,
-		});
-	}
-	return kolibri;
+	return kolibriInstance;
 };
 
 export const initKoliBri = (): void => {
-	if (getKoliBri().Modal === undefined) {
-		const Modal = new ModalService();
-		Object.defineProperty(getKoliBri(), 'Modal', {
-			get: function (): ModalService {
-				return Modal;
-			},
-		});
-		initMeta();
-		Log.debug(
-			`
+	const Modal = new ModalService();
+	Object.defineProperty(getKoliBri(), 'Modal', {
+		get: function (): ModalService {
+			return Modal;
+		},
+	});
+	initMeta();
+	Log.debug(
+		`
 	,--. ,--.         ,--. ,--. ,-----.           ,--.
 	|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'
 	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
@@ -58,13 +51,10 @@ export const initKoliBri = (): void => {
 	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
 	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.6
 		`,
-			{
-				forceLog: true,
-			}
-		);
-	} else {
-		console.warn(`You can only initialize KoliBri once.`);
-	}
+		{
+			forceLog: true,
+		}
+	);
 };
 export { getKoliBri };
 
diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
index 11abd64dfe..5e89270cd4 100644
--- a/packages/components/stencil.config.ts
+++ b/packages/components/stencil.config.ts
@@ -279,7 +279,7 @@ export const config: Config = {
 		// scopedSlotTextContentFix: true,
 		// scriptDataOpts: true,
 		// slotChildNodesFix: true,
-		// tagNameTransform: true,
+		tagNameTransform: true,
 	},
 	// enableCache: true,
 	invisiblePrehydration: true,

From c74c4ad9d1a8f967e102db195caa64a0825aa312 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Fri, 16 Feb 2024 16:20:13 +0100
Subject: [PATCH 02/24] Implement transformTagName for Button

---
 .../components/src/components/button/component.tsx  | 13 +++++++++----
 .../components/src/components/button/shadow.tsx     |  7 +++++--
 packages/components/src/utils/transform-tag-name.ts |  6 ++++++
 3 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 packages/components/src/utils/transform-tag-name.ts

diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
index dd6998d780..6ae063a979 100644
--- a/packages/components/src/components/button/component.tsx
+++ b/packages/components/src/components/button/component.tsx
@@ -46,6 +46,7 @@ import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/c
 import { AssociatedInputController } from '../input-adapter-leanup/associated.controller';
 
 import type { JSX } from '@stencil/core';
+import {transformTagName} from "../../utils/transform-tag-name";
 /**
  * @internal
  */
@@ -90,7 +91,10 @@ export class KolButtonWc implements ButtonAPI {
 	};
 
 	public render(): JSX.Element {
+		const KolSpanWc = transformTagName('kol-span-wc', 'kol-button-wc', this.host!);
+		const KolTooltipWc = transformTagName('kol-tooltip-wc', 'kol-button-wc', this.host!);
 		const hasExpertSlot = showExpertSlot(this.state._label);
+
 		return (
 			<Host>
 				<button
@@ -117,7 +121,7 @@ export class KolButtonWc implements ButtonAPI {
 					tabIndex={this.state._tabIndex}
 					type={this.state._type}
 				>
-					<kol-span-wc
+					<KolSpanWc
 						class="button-inner"
 						_accessKey={this.state._accessKey}
 						_icons={this.state._icons}
@@ -125,9 +129,10 @@ export class KolButtonWc implements ButtonAPI {
 						_label={hasExpertSlot ? '' : this.state._label}
 					>
 						<slot name="expert" slot="expert"></slot>
-					</kol-span-wc>
+					</KolSpanWc>
 				</button>
-				<kol-tooltip-wc
+				<small>(v2 button component)</small>
+				<KolTooltipWc
 					/**
 					 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,
 					 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.
@@ -137,7 +142,7 @@ export class KolButtonWc implements ButtonAPI {
 					_accessKey={this._accessKey}
 					_align={this.state._tooltipAlign}
 					_label={typeof this.state._label === 'string' ? this.state._label : ''}
-				></kol-tooltip-wc>
+				></KolTooltipWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
index 98102d8b8a..155a418bd8 100644
--- a/packages/components/src/components/button/shadow.tsx
+++ b/packages/components/src/components/button/shadow.tsx
@@ -17,6 +17,7 @@ import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import {transformTagName} from "../../utils/transform-tag-name";
 @Component({
 	tag: 'kol-button',
 	styleUrls: {
@@ -38,9 +39,11 @@ export class KolButton implements ButtonProps {
 	}
 
 	public render(): JSX.Element {
+		const KolButtonWc = transformTagName('kol-button-wc', 'kol-button', this.host!);
+
 		return (
 			<Host>
-				<kol-button-wc
+				<KolButtonWc
 					ref={this.catchRef}
 					class={{
 						button: true,
@@ -68,7 +71,7 @@ export class KolButton implements ButtonProps {
 					_variant={this._variant}
 				>
 					<slot name="expert" slot="expert"></slot>
-				</kol-button-wc>
+				</KolButtonWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/utils/transform-tag-name.ts b/packages/components/src/utils/transform-tag-name.ts
new file mode 100644
index 0000000000..0b5874c689
--- /dev/null
+++ b/packages/components/src/utils/transform-tag-name.ts
@@ -0,0 +1,6 @@
+/* Courtesy of https://dev.to/sanderand/running-multiple-versions-of-a-stencil-design-system-without-conflicts-2f46 */
+export const transformTagName = (tagNameToBeTransformed: string, knownUntransformedTagName: string, knownUntransformedTagNameElementReference: HTMLElement): string => {
+	const actualCurrentTag = knownUntransformedTagNameElementReference.tagName.toLowerCase();
+	const [prefix, suffix] = actualCurrentTag.split(knownUntransformedTagName);
+	return prefix + tagNameToBeTransformed + suffix;
+};

From b34e56a27e478a4ed3dc0befff3a15d9452935fe Mon Sep 17 00:00:00 2001
From: Martin Oppitz <6279703+deleonio@users.noreply.github.com>
Date: Mon, 19 Feb 2024 07:25:26 +0100
Subject: [PATCH 03/24] fix: condition to register kolibri once

---
 packages/components/src/utils/dev.utils.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/utils/dev.utils.ts b/packages/components/src/utils/dev.utils.ts
index 8d129ffa46..d34336b421 100644
--- a/packages/components/src/utils/dev.utils.ts
+++ b/packages/components/src/utils/dev.utils.ts
@@ -41,14 +41,16 @@ const getKoliBri = (): Record<string, unknown> => {
 };
 
 export const initKoliBri = (): void => {
-	if (getKoliBri().Modal === undefined) {
-		const Modal = new ModalService();
-		Object.defineProperty(getKoliBri(), 'Modal', {
-			get: function (): ModalService {
-				return Modal;
-			},
-		});
-		initMeta();
+	if (getKoliBri() === undefined) {
+		if (getKoliBri().Modal === undefined) {
+			const Modal = new ModalService();
+			Object.defineProperty(getKoliBri(), 'Modal', {
+				get: function (): ModalService {
+					return Modal;
+				},
+			});
+			initMeta();
+		}
 		Log.debug(
 			`
 	,--. ,--.         ,--. ,--. ,-----.           ,--.

From 117b98dfc99f26e5113950f50d1d1517c5119133 Mon Sep 17 00:00:00 2001
From: Martin Oppitz <6279703+deleonio@users.noreply.github.com>
Date: Tue, 20 Feb 2024 09:43:47 +0100
Subject: [PATCH 04/24] fix: spelling

---
 packages/components/src/utils/dev.utils.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/utils/dev.utils.ts b/packages/components/src/utils/dev.utils.ts
index d0b4947c75..c48504cf61 100644
--- a/packages/components/src/utils/dev.utils.ts
+++ b/packages/components/src/utils/dev.utils.ts
@@ -3,7 +3,7 @@ import { Log, getDocument, processEnv, setColorContrastAnalysis, setDevMode, set
 import { getWindow, setDocument, setWindow } from '@public-ui/schema';
 import { ModalService } from '../components/modal/service';
 
-const KOILIBRI = {};
+const KOLIBRI = {};
 
 export const configKoliBri = (window: Window): void => {
 	if (window instanceof Window) {
@@ -31,7 +31,7 @@ const initMeta = (): void => {
 };
 
 const getKoliBri = (): Record<string, unknown> => {
-	return KOILIBRI;
+	return KOLIBRI;
 };
 
 export const initKoliBri = (): void => {

From 857906859267bc33ff563ec21635e5782d1979d8 Mon Sep 17 00:00:00 2001
From: Martin Oppitz <6279703+deleonio@users.noreply.github.com>
Date: Tue, 20 Feb 2024 11:58:47 +0100
Subject: [PATCH 05/24] fix: format

---
 packages/components/src/components/button/component.tsx | 2 +-
 packages/components/src/components/button/shadow.tsx    | 2 +-
 packages/components/src/utils/transform-tag-name.ts     | 6 +++++-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
index 6ae063a979..cdd9413104 100644
--- a/packages/components/src/components/button/component.tsx
+++ b/packages/components/src/components/button/component.tsx
@@ -46,7 +46,7 @@ import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/c
 import { AssociatedInputController } from '../input-adapter-leanup/associated.controller';
 
 import type { JSX } from '@stencil/core';
-import {transformTagName} from "../../utils/transform-tag-name";
+import { transformTagName } from '../../utils/transform-tag-name';
 /**
  * @internal
  */
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
index 155a418bd8..9687c20cc5 100644
--- a/packages/components/src/components/button/shadow.tsx
+++ b/packages/components/src/components/button/shadow.tsx
@@ -17,7 +17,7 @@ import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
-import {transformTagName} from "../../utils/transform-tag-name";
+import { transformTagName } from '../../utils/transform-tag-name';
 @Component({
 	tag: 'kol-button',
 	styleUrls: {
diff --git a/packages/components/src/utils/transform-tag-name.ts b/packages/components/src/utils/transform-tag-name.ts
index 0b5874c689..eb67013bd4 100644
--- a/packages/components/src/utils/transform-tag-name.ts
+++ b/packages/components/src/utils/transform-tag-name.ts
@@ -1,5 +1,9 @@
 /* Courtesy of https://dev.to/sanderand/running-multiple-versions-of-a-stencil-design-system-without-conflicts-2f46 */
-export const transformTagName = (tagNameToBeTransformed: string, knownUntransformedTagName: string, knownUntransformedTagNameElementReference: HTMLElement): string => {
+export const transformTagName = (
+	tagNameToBeTransformed: string,
+	knownUntransformedTagName: string,
+	knownUntransformedTagNameElementReference: HTMLElement
+): string => {
 	const actualCurrentTag = knownUntransformedTagNameElementReference.tagName.toLowerCase();
 	const [prefix, suffix] = actualCurrentTag.split(knownUntransformedTagName);
 	return prefix + tagNameToBeTransformed + suffix;

From f697f49d317a56a16c347885750b05c7aec19c90 Mon Sep 17 00:00:00 2001
From: Martin Oppitz <6279703+deleonio@users.noreply.github.com>
Date: Wed, 21 Feb 2024 15:05:51 +0100
Subject: [PATCH 06/24] fix: initMeta

---
 packages/components/src/utils/dev.utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/utils/dev.utils.ts b/packages/components/src/utils/dev.utils.ts
index c48504cf61..773fd26701 100644
--- a/packages/components/src/utils/dev.utils.ts
+++ b/packages/components/src/utils/dev.utils.ts
@@ -35,6 +35,7 @@ const getKoliBri = (): Record<string, unknown> => {
 };
 
 export const initKoliBri = (): void => {
+	initMeta();
 	if (getKoliBri().Modal === undefined) {
 		const Modal = new ModalService();
 		Object.defineProperty(getKoliBri(), 'Modal', {
@@ -42,7 +43,6 @@ export const initKoliBri = (): void => {
 				return Modal;
 			},
 		});
-		initMeta();
 	}
 	Log.debug(
 		`

From 3792daab6b8fdd0e568dd42dcfe3bc33ca8dd270 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 26 Feb 2024 15:50:30 +0100
Subject: [PATCH 07/24] Install @stencil/react-output-target from temporary
 fork

---
 packages/components/package.json                        | 2 +-
 packages/components/src/components/button/component.tsx | 2 +-
 packages/components/src/components/button/shadow.tsx    | 2 +-
 packages/components/src/utils/transform-tag-name.ts     | 6 +++++-
 packages/components/stencil.config.ts                   | 2 +-
 5 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index e477787915..852fdf3e7a 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -77,7 +77,7 @@
 		"@stencil/angular-output-target": "0.8.4",
 		"@stencil/core": "4.11.0",
 		"@stencil/postcss": "2.1.0",
-		"@stencil/react-output-target": "0.5.3",
+		"@stencil/react-output-target": "https://gitpkg.now.sh/sdvg/stencil-ds-output-targets/packages/react-output-target?custom-tag-name",
 		"@stencil/solid-output-target": "file:node_martin/stencil-solid-output-target-0.0.1.tgz",
 		"@stencil/vue-output-target": "0.8.7",
 		"@types/jest": "26.0.24",
diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
index 6ae063a979..cdd9413104 100644
--- a/packages/components/src/components/button/component.tsx
+++ b/packages/components/src/components/button/component.tsx
@@ -46,7 +46,7 @@ import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/c
 import { AssociatedInputController } from '../input-adapter-leanup/associated.controller';
 
 import type { JSX } from '@stencil/core';
-import {transformTagName} from "../../utils/transform-tag-name";
+import { transformTagName } from '../../utils/transform-tag-name';
 /**
  * @internal
  */
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
index 155a418bd8..9687c20cc5 100644
--- a/packages/components/src/components/button/shadow.tsx
+++ b/packages/components/src/components/button/shadow.tsx
@@ -17,7 +17,7 @@ import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
-import {transformTagName} from "../../utils/transform-tag-name";
+import { transformTagName } from '../../utils/transform-tag-name';
 @Component({
 	tag: 'kol-button',
 	styleUrls: {
diff --git a/packages/components/src/utils/transform-tag-name.ts b/packages/components/src/utils/transform-tag-name.ts
index 0b5874c689..eb67013bd4 100644
--- a/packages/components/src/utils/transform-tag-name.ts
+++ b/packages/components/src/utils/transform-tag-name.ts
@@ -1,5 +1,9 @@
 /* Courtesy of https://dev.to/sanderand/running-multiple-versions-of-a-stencil-design-system-without-conflicts-2f46 */
-export const transformTagName = (tagNameToBeTransformed: string, knownUntransformedTagName: string, knownUntransformedTagNameElementReference: HTMLElement): string => {
+export const transformTagName = (
+	tagNameToBeTransformed: string,
+	knownUntransformedTagName: string,
+	knownUntransformedTagNameElementReference: HTMLElement
+): string => {
 	const actualCurrentTag = knownUntransformedTagNameElementReference.tagName.toLowerCase();
 	const [prefix, suffix] = actualCurrentTag.split(knownUntransformedTagName);
 	return prefix + tagNameToBeTransformed + suffix;
diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
index 5e89270cd4..ae00d6bb7d 100644
--- a/packages/components/stencil.config.ts
+++ b/packages/components/stencil.config.ts
@@ -5,7 +5,7 @@ import { angularOutputTarget } from '@stencil/angular-output-target';
 import { Config } from '@stencil/core';
 import { JsonDocs, OutputTarget } from '@stencil/core/internal';
 import { postcss } from '@stencil/postcss';
-import { reactOutputTarget } from '@stencil/react-output-target';
+import { reactOutputTarget } from 'kolibri-react-output-target';
 import { solidOutputTarget } from '@stencil/solid-output-target';
 import { vueOutputTarget } from '@stencil/vue-output-target';
 

From f804227010958dbcc32686a2f87577df72ca2ea7 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 26 Feb 2024 19:15:28 +0100
Subject: [PATCH 08/24] Implement experimental component-names modules

---
 .../src/components/button/component.tsx       |   8 +-
 .../components/src/core/component-names.ts    | 118 ++++++++++++++++++
 packages/components/src/core/index.ts         |   8 +-
 3 files changed, 128 insertions(+), 6 deletions(-)
 create mode 100644 packages/components/src/core/component-names.ts

diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
index cdd9413104..6d3b681974 100644
--- a/packages/components/src/components/button/component.tsx
+++ b/packages/components/src/components/button/component.tsx
@@ -39,14 +39,14 @@ import {
 	validateTooltipAlign,
 	watchString,
 } from '@public-ui/schema';
-import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
+import type { JSX } from '@stencil/core';
+import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';
 import { AssociatedInputController } from '../input-adapter-leanup/associated.controller';
+import { KolSpanWc, KolTooltipWc } from '../../core/component-names';
 
-import type { JSX } from '@stencil/core';
-import { transformTagName } from '../../utils/transform-tag-name';
 /**
  * @internal
  */
@@ -91,8 +91,6 @@ export class KolButtonWc implements ButtonAPI {
 	};
 
 	public render(): JSX.Element {
-		const KolSpanWc = transformTagName('kol-span-wc', 'kol-button-wc', this.host!);
-		const KolTooltipWc = transformTagName('kol-tooltip-wc', 'kol-button-wc', this.host!);
 		const hasExpertSlot = showExpertSlot(this.state._label);
 
 		return (
diff --git a/packages/components/src/core/component-names.ts b/packages/components/src/core/component-names.ts
new file mode 100644
index 0000000000..00a345c42c
--- /dev/null
+++ b/packages/components/src/core/component-names.ts
@@ -0,0 +1,118 @@
+export let KolAbbr = 'kol-abbr';
+export let KolAccordion = 'kol-accordion';
+export let KolAlert = 'kol-alert';
+export let KolAlertWc = 'kol-alert-wc';
+export let KolAvatar = 'kol-avatar';
+export let KolAvatarWc = 'kol-avatar-wc';
+export let KolBadge = 'kol-badge';
+export let KolBreadcrumb = 'kol-breadcrumb';
+export let KolButton = 'kol-button';
+export let KolButtonGroup = 'kol-button-group';
+export let KolButtonGroupWc = 'kol-button-group-wc';
+export let KolButtonLink = 'kol-button-link';
+export let KolCard = 'kol-card';
+export let KolDetails = 'kol-details';
+export let KolForm = 'kol-form';
+export let KolHeading = 'kol-heading';
+export let KolHeadingWc = 'kol-heading-wc';
+export let KolIcon = 'kol-icon';
+export let KolImage = 'kol-image';
+export let KolIndentedText = 'kol-indented-text';
+export let KolInputCheckbox = 'kol-input-checkbox';
+export let KolInputColor = 'kol-input-color';
+export let KolInputDate = 'kol-input-date';
+export let KolInputEmail = 'kol-input-email';
+export let KolInputFile = 'kol-input-file';
+export let KolInputNumber = 'kol-input-number';
+export let KolInputPassword = 'kol-input-password';
+export let KolInputRadio = 'kol-input-radio';
+export let KolInputRange = 'kol-input-range';
+export let KolInputText = 'kol-input-text';
+export let KolKolibri = 'kol-kolibri';
+export let KolLink = 'kol-link';
+export let KolLinkButton = 'kol-link-button';
+export let KolLinkGroup = 'kol-link-group';
+export let KolLogo = 'kol-logo';
+export let KolModal = 'kol-modal';
+export let KolNav = 'kol-nav';
+export let KolPagination = 'kol-pagination';
+export let KolPopoverWc = 'kol-popover-wc';
+export let KolProgress = 'kol-progress';
+export let KolQuote = 'kol-quote';
+export let KolSelect = 'kol-select';
+export let KolSkipNav = 'kol-skip-nav';
+export let KolSpan = 'kol-span';
+export let KolSpanWc = 'kol-span-wc';
+export let KolSpin = 'kol-spin';
+export let KolSplitButton = 'kol-split-button';
+export let KolSymbol = 'kol-symbol';
+export let KolTable = 'kol-table';
+export let KolTabs = 'kol-tabs';
+export let KolTextarea = 'kol-textarea';
+export let KolToastContainer = 'kol-toast-container';
+export let KolTooltipWc = 'kol-tooltip-wc';
+export let KolTree = 'kol-tree';
+export let KolTreeItem = 'kol-tree-item';
+export let KolTreeItemWc = 'kol-tree-item-wc';
+export let KolTreeWc = 'kol-tree-wc';
+export let KolVersion = 'kol-version';
+
+export const setCustomTagNames = (transformTagName: (tagName: string) => string) => {
+	KolAbbr = transformTagName(KolAbbr);
+	KolAccordion = transformTagName(KolAccordion);
+	KolAlert = transformTagName(KolAlert);
+	KolAlertWc = transformTagName(KolAlertWc);
+	KolAvatar = transformTagName(KolAvatar);
+	KolAvatarWc = transformTagName(KolAvatarWc);
+	KolBadge = transformTagName(KolBadge);
+	KolBreadcrumb = transformTagName(KolBreadcrumb);
+	KolButton = transformTagName(KolButton);
+	KolButtonGroup = transformTagName(KolButtonGroup);
+	KolButtonGroupWc = transformTagName(KolButtonGroupWc);
+	KolButtonLink = transformTagName(KolButtonLink);
+	KolCard = transformTagName(KolCard);
+	KolDetails = transformTagName(KolDetails);
+	KolForm = transformTagName(KolForm);
+	KolHeading = transformTagName(KolHeading);
+	KolHeadingWc = transformTagName(KolHeadingWc);
+	KolIcon = transformTagName(KolIcon);
+	KolImage = transformTagName(KolImage);
+	KolIndentedText = transformTagName(KolIndentedText);
+	KolInputCheckbox = transformTagName(KolInputCheckbox);
+	KolInputColor = transformTagName(KolInputColor);
+	KolInputDate = transformTagName(KolInputDate);
+	KolInputEmail = transformTagName(KolInputEmail);
+	KolInputFile = transformTagName(KolInputFile);
+	KolInputNumber = transformTagName(KolInputNumber);
+	KolInputPassword = transformTagName(KolInputPassword);
+	KolInputRadio = transformTagName(KolInputRadio);
+	KolInputRange = transformTagName(KolInputRange);
+	KolInputText = transformTagName(KolInputText);
+	KolKolibri = transformTagName(KolKolibri);
+	KolLink = transformTagName(KolLink);
+	KolLinkButton = transformTagName(KolLinkButton);
+	KolLinkGroup = transformTagName(KolLinkGroup);
+	KolLogo = transformTagName(KolLogo);
+	KolModal = transformTagName(KolModal);
+	KolNav = transformTagName(KolNav);
+	KolPagination = transformTagName(KolPagination);
+	KolPopoverWc = transformTagName(KolPopoverWc);
+	KolProgress = transformTagName(KolProgress);
+	KolQuote = transformTagName(KolQuote);
+	KolSelect = transformTagName(KolSelect);
+	KolSkipNav = transformTagName(KolSkipNav);
+	KolSpan = transformTagName(KolSpan);
+	KolSpin = transformTagName(KolSpin);
+	KolSplitButton = transformTagName(KolSplitButton);
+	KolSymbol = transformTagName(KolSymbol);
+	KolTable = transformTagName(KolTable);
+	KolTabs = transformTagName(KolTabs);
+	KolTextarea = transformTagName(KolTextarea);
+	KolToastContainer = transformTagName(KolToastContainer);
+	KolTooltipWc = transformTagName(KolTooltipWc);
+	KolTree = transformTagName(KolTree);
+	KolTreeItem = transformTagName(KolTreeItem);
+	KolTreeItemWc = transformTagName(KolTreeItemWc);
+	KolTreeWc = transformTagName(KolTreeWc);
+	KolVersion = transformTagName(KolVersion);
+};
diff --git a/packages/components/src/core/index.ts b/packages/components/src/core/index.ts
index 4ea4c1a388..9cdeb56959 100644
--- a/packages/components/src/core/index.ts
+++ b/packages/components/src/core/index.ts
@@ -2,9 +2,10 @@ import type { Generic, LoaderCallback, RegisterOptions } from 'adopted-style-she
 import { register as coreRegister } from 'adopted-style-sheets';
 
 import { getKoliBri } from '../utils/dev.utils';
+import type { II18nService } from './i18n';
 import { I18nextService } from './i18n';
+import { setCustomTagNames } from './component-names';
 
-import type { II18nService } from './i18n';
 export const register = async (
 	themes:
 		| Generic.Theming.RegisterPatch<string, string, string>
@@ -19,6 +20,11 @@ export const register = async (
 			writable: false,
 		});
 	}
+
+	if (options?.transformTagName) {
+		setCustomTagNames(options.transformTagName);
+	}
+
 	return await coreRegister(themes, loaders, options);
 };
 

From a0344a98fe8b9468bd988b56bbe2596cd9c59ca3 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Tue, 27 Feb 2024 10:35:07 +0100
Subject: [PATCH 09/24] Remove transform-tag-name

---
 packages/components/src/components/button/shadow.tsx |  4 +---
 packages/components/src/core/component-names.ts      |  1 +
 packages/components/src/utils/transform-tag-name.ts  | 10 ----------
 3 files changed, 2 insertions(+), 13 deletions(-)
 delete mode 100644 packages/components/src/utils/transform-tag-name.ts

diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
index 74c86e55ac..3f37ec1a53 100644
--- a/packages/components/src/components/button/shadow.tsx
+++ b/packages/components/src/components/button/shadow.tsx
@@ -15,9 +15,9 @@ import type {
 } from '@public-ui/schema';
 import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
+import { KolButtonWc } from '../../core/component-names';
 
 import type { JSX } from '@stencil/core';
-import { transformTagName } from '../../utils/transform-tag-name';
 @Component({
 	tag: 'kol-button',
 	styleUrls: {
@@ -39,8 +39,6 @@ export class KolButton implements ButtonProps {
 	}
 
 	public render(): JSX.Element {
-		const KolButtonWc = transformTagName('kol-button-wc', 'kol-button', this.host!);
-
 		return (
 			<Host>
 				<KolButtonWc
diff --git a/packages/components/src/core/component-names.ts b/packages/components/src/core/component-names.ts
index 00a345c42c..56ef275943 100644
--- a/packages/components/src/core/component-names.ts
+++ b/packages/components/src/core/component-names.ts
@@ -7,6 +7,7 @@ export let KolAvatarWc = 'kol-avatar-wc';
 export let KolBadge = 'kol-badge';
 export let KolBreadcrumb = 'kol-breadcrumb';
 export let KolButton = 'kol-button';
+export let KolButtonWc = 'kol-button-wc';
 export let KolButtonGroup = 'kol-button-group';
 export let KolButtonGroupWc = 'kol-button-group-wc';
 export let KolButtonLink = 'kol-button-link';
diff --git a/packages/components/src/utils/transform-tag-name.ts b/packages/components/src/utils/transform-tag-name.ts
deleted file mode 100644
index eb67013bd4..0000000000
--- a/packages/components/src/utils/transform-tag-name.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/* Courtesy of https://dev.to/sanderand/running-multiple-versions-of-a-stencil-design-system-without-conflicts-2f46 */
-export const transformTagName = (
-	tagNameToBeTransformed: string,
-	knownUntransformedTagName: string,
-	knownUntransformedTagNameElementReference: HTMLElement
-): string => {
-	const actualCurrentTag = knownUntransformedTagNameElementReference.tagName.toLowerCase();
-	const [prefix, suffix] = actualCurrentTag.split(knownUntransformedTagName);
-	return prefix + tagNameToBeTransformed + suffix;
-};

From bfe45c6b700b5d8dd52981cfc51929458bd5cf84 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Tue, 27 Feb 2024 10:36:40 +0100
Subject: [PATCH 10/24] Remove test output

---
 packages/components/src/components/button/component.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
index 6d3b681974..4b9b4fde61 100644
--- a/packages/components/src/components/button/component.tsx
+++ b/packages/components/src/components/button/component.tsx
@@ -129,7 +129,6 @@ export class KolButtonWc implements ButtonAPI {
 						<slot name="expert" slot="expert"></slot>
 					</KolSpanWc>
 				</button>
-				<small>(v2 button component)</small>
 				<KolTooltipWc
 					/**
 					 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,

From 5a77733b4d01a9e115a448dff7ed90e96fd62b48 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Tue, 27 Feb 2024 11:22:02 +0100
Subject: [PATCH 11/24] Refactor all internal component usages to use
 'component-names'

---
 packages/components/package.json              |  6 ++--
 .../src/components/abbr/component.tsx         |  3 +-
 .../components/src/components/abbr/readme.md  | 16 ----------
 .../src/components/accordion/component.tsx    |  9 +++---
 .../src/components/accordion/readme.md        | 16 ----------
 .../src/components/alert/component.tsx        |  9 +++---
 .../components/src/components/alert/readme.md | 23 -------------
 .../src/components/alert/shadow.tsx           |  5 +--
 .../src/components/avatar/readme.md           | 14 --------
 .../src/components/avatar/shadow.tsx          |  3 +-
 .../src/components/badge/component.tsx        |  5 +--
 .../components/src/components/badge/readme.md |  8 -----
 .../src/components/breadcrumb/component.tsx   |  8 +++--
 .../src/components/breadcrumb/readme.md       |  8 -----
 .../src/components/button-group/readme.md     | 16 ----------
 .../src/components/button-group/shadow.tsx    |  5 +--
 .../src/components/button-link/component.tsx  |  5 +--
 .../src/components/button-link/readme.md      | 14 --------
 .../src/components/button/readme.md           | 18 -----------
 .../src/components/card/component.tsx         |  7 ++--
 .../components/src/components/card/readme.md  | 16 ----------
 .../src/components/details/component.tsx      |  7 ++--
 .../src/components/details/readme.md          | 16 ----------
 .../src/components/form/component.tsx         | 15 +++++----
 .../components/src/components/form/readme.md  | 28 ----------------
 .../src/components/heading/readme.md          | 20 ------------
 .../src/components/heading/shadow.tsx         |  5 +--
 .../components/src/components/icon/readme.md  | 12 -------
 .../src/components/indented-text/readme.md    | 16 ----------
 .../components/input-checkbox/component.tsx   |  7 ++--
 .../src/components/input-checkbox/readme.md   | 26 ---------------
 .../src/components/input-color/component.tsx  |  5 +--
 .../src/components/input-color/readme.md      | 24 --------------
 .../src/components/input-date/component.tsx   |  5 +--
 .../src/components/input-date/readme.md       | 24 --------------
 .../src/components/input-email/component.tsx  |  5 +--
 .../src/components/input-email/readme.md      | 24 --------------
 .../src/components/input-file/component.tsx   |  5 +--
 .../src/components/input-file/readme.md       | 24 --------------
 .../src/components/input-number/component.tsx |  5 +--
 .../src/components/input-number/readme.md     | 24 --------------
 .../components/input-password/component.tsx   |  5 +--
 .../src/components/input-password/readme.md   | 24 --------------
 .../src/components/input-radio/component.tsx  |  5 +--
 .../src/components/input-radio/readme.md      | 12 -------
 .../src/components/input-range/component.tsx  |  5 +--
 .../src/components/input-range/readme.md      | 24 --------------
 .../src/components/input-text/component.tsx   |  5 +--
 .../src/components/input-text/readme.md       | 24 --------------
 .../src/components/input/component.tsx        | 13 ++++----
 .../src/components/link-button/component.tsx  |  5 +--
 .../src/components/link-button/readme.md      | 19 -----------
 .../src/components/link-group/component.tsx   |  3 +-
 .../src/components/link-group/readme.md       | 20 ------------
 .../src/components/link/component.tsx         | 11 ++++---
 .../components/src/components/link/readme.md  | 32 -------------------
 .../components/src/components/link/shadow.tsx |  5 +--
 .../src/components/nav/component.tsx          | 13 ++++----
 .../components/src/components/nav/readme.md   | 23 -------------
 .../src/components/pagination/component.tsx   | 31 +++++++++---------
 .../src/components/pagination/readme.md       | 32 -------------------
 .../components/src/components/quote/readme.md | 20 ------------
 .../src/components/quote/shadow.tsx           |  3 +-
 .../src/components/select/component.tsx       |  5 +--
 .../src/components/select/readme.md           | 29 -----------------
 .../src/components/skip-nav/component.tsx     |  3 +-
 .../src/components/skip-nav/readme.md         | 19 -----------
 .../src/components/span/component.tsx         |  9 +++---
 .../components/src/components/span/readme.md  | 15 ---------
 .../components/src/components/span/shadow.tsx |  5 +--
 .../src/components/split-button/component.tsx |  9 +++---
 .../src/components/split-button/readme.md     | 14 --------
 .../src/components/table/component.tsx        | 13 ++++----
 .../components/src/components/table/readme.md | 31 ------------------
 .../src/components/tabs/component.tsx         | 13 ++++----
 .../components/src/components/tabs/readme.md  | 16 ----------
 .../src/components/textarea/component.tsx     |  5 +--
 .../src/components/textarea/readme.md         | 24 --------------
 .../src/components/toaster/component.tsx      |  5 +--
 .../src/components/toaster/readme.md          |  6 ----
 .../src/components/tooltip/component.tsx      |  3 +-
 .../src/components/tooltip/readme.md          | 24 --------------
 .../src/components/tree-item/component.tsx    |  7 ++--
 .../src/components/tree-item/readme.md        | 25 ---------------
 .../src/components/tree-item/shadow.tsx       |  5 +--
 .../components/src/components/tree/readme.md  | 14 --------
 .../components/src/components/tree/shadow.tsx |  5 +--
 .../src/components/version/component.tsx      |  3 +-
 .../src/components/version/readme.md          | 17 ----------
 .../components/src/core/component-names.ts    |  4 +++
 pnpm-lock.yaml                                | 13 ++++++--
 91 files changed, 196 insertions(+), 990 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index fdf3af56e8..acd117ac49 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -69,7 +69,7 @@
 	"dependencies": {
 		"@floating-ui/dom": "1.6.3",
 		"@public-ui/schema": "2.0.8",
-		"adopted-style-sheets": "1.1.3",
+		"adopted-style-sheets": "link:../../../a11y-ui/packages/adopted-style-sheets",
 		"i18next": "23.9.0",
 		"markdown-it": "14.0.0"
 	},
@@ -78,7 +78,6 @@
 		"@stencil/core": "4.12.3",
 		"@stencil/postcss": "2.1.0",
 		"@stencil/sass": "3.0.9",
-		"sdvg-react-output-target": "https://gitpkg.now.sh/sdvg/stencil-ds-output-targets/packages/react-output-target?custom-tag-name-dist",
 		"@stencil/solid-output-target": "file:node_martin/stencil-solid-output-target-0.0.1.tgz",
 		"@stencil/vue-output-target": "0.8.7",
 		"@types/jest": "26.0.24",
@@ -90,9 +89,9 @@
 		"@typescript-eslint/eslint-plugin": "7.0.2",
 		"@typescript-eslint/parser": "7.0.2",
 		"autoprefixer": "10.4.17",
+		"clsx": "2.1.0",
 		"color-rgba": "2.4.0",
 		"cross-env": "7.0.3",
-		"clsx": "2.1.0",
 		"cssnano": "6.0.3",
 		"eslint": "8.56.0",
 		"eslint-plugin-html": "8.0.0",
@@ -110,6 +109,7 @@
 		"prettier": "2.8.8",
 		"pug": "3.0.2",
 		"rimraf": "3.0.2",
+		"sdvg-react-output-target": "https://gitpkg.now.sh/sdvg/stencil-ds-output-targets/packages/react-output-target?custom-tag-name-dist",
 		"stencil-awesome-test": "1.0.6",
 		"terser": "5.27.2",
 		"tslib": "2.6.2",
diff --git a/packages/components/src/components/abbr/component.tsx b/packages/components/src/components/abbr/component.tsx
index 3456351c73..242840cc4e 100644
--- a/packages/components/src/components/abbr/component.tsx
+++ b/packages/components/src/components/abbr/component.tsx
@@ -3,6 +3,7 @@ import { validateLabel, validateTooltipAlign } from '@public-ui/schema';
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
+import { KolTooltipWc } from '../../core/component-names';
 
 import type { AbbrAPI, AbbrStates, LabelPropType, TooltipAlignPropType } from '@public-ui/schema';
 
@@ -28,7 +29,7 @@ export class KolAbbr implements AbbrAPI {
 						<slot />
 					</span>
 				</abbr>
-				<kol-tooltip-wc _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></kol-tooltip-wc>
+				<KolTooltipWc _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></KolTooltipWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/abbr/readme.md b/packages/components/src/components/abbr/readme.md
index d577ccf143..feb7da213a 100644
--- a/packages/components/src/components/abbr/readme.md
+++ b/packages/components/src/components/abbr/readme.md
@@ -55,20 +55,4 @@ Der KoliBri Tooltip kann von Screenreadern vorgelesen werden und verändert sein
 | ---- | --------------------------------------- |
 |      | Der Begriff, der erläutert werden soll. |
 
-## Dependencies
-
-### Depends on
-
-- [kol-tooltip-wc](../tooltip)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-abbr --> kol-tooltip-wc
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  style kol-abbr stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/accordion/component.tsx b/packages/components/src/components/accordion/component.tsx
index a1867156b7..328e3fdfd5 100644
--- a/packages/components/src/components/accordion/component.tsx
+++ b/packages/components/src/components/accordion/component.tsx
@@ -6,6 +6,7 @@ import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { watchHeadingLevel } from '../heading/validation';
+import { KolHeadingWc, KolButtonWc } from '../../core/component-names';
 
 import type { AccordionAPI, AccordionStates, DisabledPropType, HeadingLevel, KoliBriAccordionCallbacks, LabelPropType, OpenPropType } from '@public-ui/schema';
 featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
@@ -44,8 +45,8 @@ export class KolAccordion implements AccordionAPI {
 						open: this.state._open === true,
 					}}
 				>
-					<kol-heading-wc _label="" _level={this.state._level} class="accordion-heading">
-						<kol-button-wc
+					<KolHeadingWc _label="" _level={this.state._level} class="accordion-heading">
+						<KolButtonWc
 							class="accordion-button"
 							ref={this.catchRef}
 							slot="expert"
@@ -55,8 +56,8 @@ export class KolAccordion implements AccordionAPI {
 							_icons={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}
 							_label={this.state._label}
 							_on={{ onClick: this.onClick }}
-						></kol-button-wc>
-					</kol-heading-wc>
+						></KolButtonWc>
+					</KolHeadingWc>
 					<div class="wrapper">
 						<div class="animation-wrapper">
 							<div aria-hidden={this.state._open === false ? 'true' : undefined} class="content" id={this.nonce}>
diff --git a/packages/components/src/components/accordion/readme.md b/packages/components/src/components/accordion/readme.md
index dc56a25c81..4877f8ae11 100644
--- a/packages/components/src/components/accordion/readme.md
+++ b/packages/components/src/components/accordion/readme.md
@@ -123,20 +123,4 @@ Standardansicht gelegt.
 | ---- | ------------------------------------------------------------------------------- |
 |      | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich des Accordions. |
 
-## Dependencies
-
-### Depends on
-
-- [kol-heading-wc](../heading)
-- kol-button-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-accordion --> kol-heading-wc
-  kol-accordion --> kol-button-wc
-  style kol-accordion stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/alert/component.tsx b/packages/components/src/components/alert/component.tsx
index ba0777776d..11928682be 100644
--- a/packages/components/src/components/alert/component.tsx
+++ b/packages/components/src/components/alert/component.tsx
@@ -4,6 +4,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { translate } from '../../i18n';
 import { watchHeadingLevel } from '../heading/validation';
+import { KolIcon, KolHeadingWc, KolButtonWc } from '../../core/component-names';
 
 import type {
 	AlertAPI,
@@ -16,7 +17,7 @@ import type {
 	LabelPropType,
 } from '@public-ui/schema';
 const Icon = (props: { ariaLabel: string; icon: string; label?: string }) => {
-	return <kol-icon class="heading-icon" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;
+	return <KolIcon class="heading-icon" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;
 };
 
 const AlertIcon = (props: { label?: string; type?: AlertType }) => {
@@ -83,7 +84,7 @@ export class KolAlertWc implements AlertAPI {
 					<AlertIcon label={this.state._label} type={this.state._type} />
 					<div class="heading-content">
 						{typeof this.state._label === 'string' && this.state._label?.length > 0 && (
-							<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>
+							<KolHeadingWc _label={this.state._label} _level={this.state._level}></KolHeadingWc>
 						)}
 						{this.state._variant === 'msg' && (
 							<div class="content">
@@ -92,7 +93,7 @@ export class KolAlertWc implements AlertAPI {
 						)}
 					</div>
 					{this.state._hasCloser && (
-						<kol-button-wc
+						<KolButtonWc
 							class="close"
 							_hideLabel
 							_icons={{
@@ -103,7 +104,7 @@ export class KolAlertWc implements AlertAPI {
 							_label={translate('kol-close')}
 							_on={this.on}
 							_tooltipAlign="left"
-						></kol-button-wc>
+						></KolButtonWc>
 					)}
 				</div>
 				{this.state._variant === 'card' && (
diff --git a/packages/components/src/components/alert/readme.md b/packages/components/src/components/alert/readme.md
index c62e01f03f..413dbc969a 100644
--- a/packages/components/src/components/alert/readme.md
+++ b/packages/components/src/components/alert/readme.md
@@ -95,27 +95,4 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 | ---- | ----------------------- |
 |      | Der Inhalt der Meldung. |
 
-## Dependencies
-
-### Used by
-
-- [kol-alert](.)
-
-### Depends on
-
-- [kol-heading-wc](../heading)
-- kol-button-wc
-- [kol-icon](../icon)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  style kol-alert-wc stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/alert/shadow.tsx b/packages/components/src/components/alert/shadow.tsx
index d5c55ccb5b..5e9136a557 100644
--- a/packages/components/src/components/alert/shadow.tsx
+++ b/packages/components/src/components/alert/shadow.tsx
@@ -1,6 +1,7 @@
 import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Host, Prop, State } from '@stencil/core';
+import { KolAlertWc } from '../../core/component-names';
 
 /**
  * @slot - Der Inhalt der Meldung.
@@ -16,7 +17,7 @@ export class KolAlert implements AlertProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<kol-alert-wc
+				<KolAlertWc
 					_alert={this._alert}
 					_hasCloser={this._hasCloser}
 					_label={this._label}
@@ -26,7 +27,7 @@ export class KolAlert implements AlertProps {
 					_variant={this._variant}
 				>
 					<slot />
-				</kol-alert-wc>
+				</KolAlertWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/avatar/readme.md b/packages/components/src/components/avatar/readme.md
index 839530346f..f30dd0d200 100644
--- a/packages/components/src/components/avatar/readme.md
+++ b/packages/components/src/components/avatar/readme.md
@@ -51,18 +51,4 @@ Bei der **Avatar**-Komponente wurden insbesondere folgende Punkte der Barrierefr
 | `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`              | `undefined` |
 | `_src`                | `_src`    | Sets the image `src` attribute to the given string.                                                                | `string \| undefined` | `undefined` |
 
-## Dependencies
-
-### Used by
-
-- [kol-avatar](.)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-avatar --> kol-avatar-wc
-  style kol-avatar-wc stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/avatar/shadow.tsx b/packages/components/src/components/avatar/shadow.tsx
index 80def0f306..9a6111f6bc 100644
--- a/packages/components/src/components/avatar/shadow.tsx
+++ b/packages/components/src/components/avatar/shadow.tsx
@@ -2,6 +2,7 @@ import type { JSX } from '@stencil/core';
 import { Component, h, Host, Prop } from '@stencil/core';
 
 import type { AvatarProps } from '@public-ui/schema';
+import { KolAvatarWc } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-avatar',
@@ -14,7 +15,7 @@ export class KolAvatar implements AvatarProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<kol-avatar-wc _src={this._src} _label={this._label}></kol-avatar-wc>
+				<KolAvatarWc _src={this._src} _label={this._label}></KolAvatarWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/badge/component.tsx b/packages/components/src/components/badge/component.tsx
index b2fb166ab5..a49b0ee3ad 100644
--- a/packages/components/src/components/badge/component.tsx
+++ b/packages/components/src/components/badge/component.tsx
@@ -5,6 +5,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 import { nonce } from '../../utils/dev.utils';
 
 import type { JSX } from '@stencil/core';
+import { KolButtonWc } from '../../core/component-names';
 featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
 
 @Component({
@@ -21,7 +22,7 @@ export class KolBadge implements BadgeAPI {
 
 	private renderSmartButton(props: ButtonProps): JSX.Element {
 		return (
-			<kol-button-wc
+			<KolButtonWc
 				_ariaControls={this.id}
 				_customClass={props._customClass}
 				_disabled={props._disabled}
@@ -32,7 +33,7 @@ export class KolBadge implements BadgeAPI {
 				_on={props._on}
 				_tooltipAlign={props._tooltipAlign}
 				_variant={props._variant}
-			></kol-button-wc>
+			></KolButtonWc>
 		);
 	}
 
diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md
index 03bfb0cd62..434cea86f5 100644
--- a/packages/components/src/components/badge/readme.md
+++ b/packages/components/src/components/badge/readme.md
@@ -108,23 +108,15 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 
 ## Dependencies
 
-### Used by
-
-- [kol-version](../version)
-
 ### Depends on
 
-- kol-button-wc
 - kol-span-wc
 
 ### Graph
 
 ```mermaid
 graph TD;
-  kol-badge --> kol-button-wc
   kol-badge --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-version --> kol-badge
   style kol-badge stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/breadcrumb/component.tsx b/packages/components/src/components/breadcrumb/component.tsx
index c92422cf1e..2e548b6874 100644
--- a/packages/components/src/components/breadcrumb/component.tsx
+++ b/packages/components/src/components/breadcrumb/component.tsx
@@ -6,6 +6,8 @@ import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from '../nav/validation';
 
 import type { JSX } from '@stencil/core';
+import { KolIcon, KolLink } from '../../core/component-names';
+
 @Component({
 	tag: 'kol-breadcrumb',
 	styleUrls: {
@@ -18,17 +20,17 @@ export class KolBreadcrumb implements BreadcrumbAPI {
 		const lastIndex = this.state._links.length - 1;
 		return (
 			<li key={index}>
-				{index !== 0 && <kol-icon _label="" _icons="codicon codicon-chevron-right" />}
+				{index !== 0 && <KolIcon _label="" _icons="codicon codicon-chevron-right" />}
 				{index === lastIndex ? (
 					<span>
 						{link._hideLabel ? (
-							<kol-icon _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />
+							<KolIcon _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />
 						) : (
 							<>{link._label}</>
 						)}
 					</span>
 				) : (
-					<kol-link {...link}></kol-link>
+					<KolLink {...link}></KolLink>
 				)}
 			</li>
 		);
diff --git a/packages/components/src/components/breadcrumb/readme.md b/packages/components/src/components/breadcrumb/readme.md
index 83d964eedb..49cd305c17 100644
--- a/packages/components/src/components/breadcrumb/readme.md
+++ b/packages/components/src/components/breadcrumb/readme.md
@@ -97,20 +97,12 @@ Beachten Sie, dass auch das letzte Element in der Breadcrumb-Komponente per Tab-
 ### Depends on
 
 - [kol-icon](../icon)
-- [kol-link](../link)
 
 ### Graph
 
 ```mermaid
 graph TD;
   kol-breadcrumb --> kol-icon
-  kol-breadcrumb --> kol-link
-  kol-link --> kol-link-wc
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
   style kol-breadcrumb stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/button-group/readme.md b/packages/components/src/components/button-group/readme.md
index 21675d85fd..113d3fddef 100644
--- a/packages/components/src/components/button-group/readme.md
+++ b/packages/components/src/components/button-group/readme.md
@@ -86,20 +86,4 @@ Bei Verwendung der **ButtonGroup**-Komponente sind keine besonderen Maßnahmen i
 
 <!-- Auto Generated Below -->
 
-## Dependencies
-
-### Used by
-
-- [kol-button-group](.)
-- [kol-tabs](../tabs)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-button-group --> kol-button-group-wc
-  kol-tabs --> kol-button-group-wc
-  style kol-button-group-wc stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/button-group/shadow.tsx b/packages/components/src/components/button-group/shadow.tsx
index 8fede05a0d..001572e0a6 100644
--- a/packages/components/src/components/button-group/shadow.tsx
+++ b/packages/components/src/components/button-group/shadow.tsx
@@ -1,6 +1,7 @@
 import type { ButtonGroupProps } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Host } from '@stencil/core';
+import { KolButtonGroupWc } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-button-group',
@@ -13,9 +14,9 @@ export class KolButtonGroup implements ButtonGroupProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<kol-button-group-wc>
+				<KolButtonGroupWc>
 					<slot />
-				</kol-button-group-wc>
+				</KolButtonGroupWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/button-link/component.tsx b/packages/components/src/components/button-link/component.tsx
index b475762bce..9ec378ba33 100644
--- a/packages/components/src/components/button-link/component.tsx
+++ b/packages/components/src/components/button-link/component.tsx
@@ -17,6 +17,7 @@ import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import { KolButtonWc } from '../../core/component-names';
 @Component({
 	tag: 'kol-button-link',
 	styleUrls: {
@@ -40,7 +41,7 @@ export class KolButtonLink implements ButtonLinkProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<kol-button-wc
+				<KolButtonWc
 					ref={this.catchRef}
 					_accessKey={this._accessKey}
 					_ariaControls={this._ariaControls}
@@ -61,7 +62,7 @@ export class KolButtonLink implements ButtonLinkProps {
 					_value={this._value}
 				>
 					<slot name="expert" slot="expert"></slot>
-				</kol-button-wc>
+				</KolButtonWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/button-link/readme.md b/packages/components/src/components/button-link/readme.md
index 6dcebb4af8..ea090aa83d 100644
--- a/packages/components/src/components/button-link/readme.md
+++ b/packages/components/src/components/button-link/readme.md
@@ -55,18 +55,4 @@ Da der Link, nicht wie der Button, in mehrere Varianten (`primary` oder `seconda
 
 Type: `Promise<Stringified<StencilUnknown>>`
 
-## Dependencies
-
-### Depends on
-
-- kol-button-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-button-link --> kol-button-wc
-  style kol-button-link stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md
index e484014d5b..f393ec8323 100644
--- a/packages/components/src/components/button/readme.md
+++ b/packages/components/src/components/button/readme.md
@@ -126,22 +126,4 @@ Probleme mit Disabled-Status
 
 Type: `Promise<Stringified<StencilUnknown>>`
 
-## Dependencies
-
-### Used by
-
-- [kol-nav](../nav)
-- [kol-table](../table)
-- [kol-toast-container](../toaster)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-nav --> kol-button
-  kol-table --> kol-button
-  kol-toast-container --> kol-button
-  style kol-button stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/card/component.tsx b/packages/components/src/components/card/component.tsx
index 01aeb1f797..3a5182369e 100644
--- a/packages/components/src/components/card/component.tsx
+++ b/packages/components/src/components/card/component.tsx
@@ -14,6 +14,7 @@ import { translate } from '../../i18n';
 import { watchHeadingLevel } from '../heading/validation';
 
 import type { JSX } from '@stencil/core';
+import { KolButtonWc, KolHeadingWc } from '../../core/component-names';
 /**
  * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.
  */
@@ -40,13 +41,13 @@ export class KolCard implements CardAPI {
 			<Host>
 				<div class="card">
 					<div class="header">
-						<kol-heading-wc _label={this.state._label} _level={this.state._level}></kol-heading-wc>
+						<KolHeadingWc _label={this.state._label} _level={this.state._level}></KolHeadingWc>
 					</div>
 					<div class="content">
 						<slot />
 					</div>
 					{this.state._hasCloser && (
-						<kol-button-wc
+						<KolButtonWc
 							class="close"
 							_hideLabel
 							_icons={{
@@ -57,7 +58,7 @@ export class KolCard implements CardAPI {
 							_label={translate('kol-close')}
 							_on={this.on}
 							_tooltipAlign="left"
-						></kol-button-wc>
+						></KolButtonWc>
 					)}
 				</div>
 			</Host>
diff --git a/packages/components/src/components/card/readme.md b/packages/components/src/components/card/readme.md
index 5989eac204..208095981b 100644
--- a/packages/components/src/components/card/readme.md
+++ b/packages/components/src/components/card/readme.md
@@ -81,20 +81,4 @@ Bitte beachten Sie, dass Sie zwar ein beliebiges HTML-Tag als Inhalts-Container
 | ---- | ------------------------------------------------------------------------- |
 |      | Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card. |
 
-## Dependencies
-
-### Depends on
-
-- [kol-heading-wc](../heading)
-- kol-button-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-card --> kol-heading-wc
-  kol-card --> kol-button-wc
-  style kol-card stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/details/component.tsx b/packages/components/src/components/details/component.tsx
index eb6606f986..cfcbff565f 100644
--- a/packages/components/src/components/details/component.tsx
+++ b/packages/components/src/components/details/component.tsx
@@ -9,6 +9,7 @@ import type { DisabledPropType } from '@public-ui/schema';
 import { validateDisabled } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { preventDefaultAndStopPropagation } from '../../utils/events';
+import { KolIcon, KolIndentedText } from '../../core/component-names';
 
 /**
  * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.
@@ -63,13 +64,13 @@ export class KolDetails implements DetailsAPI {
 						onKeyPress={this.preventToggleIfDisabled}
 						tabIndex={this.state._disabled ? -1 : undefined}
 					>
-						<kol-icon _label="" _icons="codicon codicon-chevron-right" class={`icon ${this.state._open ? 'is-open' : ''}`} />
+						<KolIcon _label="" _icons="codicon codicon-chevron-right" class={`icon ${this.state._open ? 'is-open' : ''}`} />
 						<span>{this.state._label}</span>
 					</summary>
 					<div aria-hidden={this.state._open === false ? 'true' : undefined} class="content" ref={(element) => (this.contentElement = element)}>
-						<kol-indented-text>
+						<KolIndentedText>
 							<slot />
-						</kol-indented-text>
+						</KolIndentedText>
 					</div>
 				</details>
 			</Host>
diff --git a/packages/components/src/components/details/readme.md b/packages/components/src/components/details/readme.md
index 80f1b19b16..ea9376f9b8 100644
--- a/packages/components/src/components/details/readme.md
+++ b/packages/components/src/components/details/readme.md
@@ -103,20 +103,4 @@ Verwenden Sie das Attribut **`_label`**, um den Text zu definieren, der als Übe
 | ---- | --------------------------------------------------------- |
 |      | Der Inhalt, der in der Detailbeschreibung angezeigt wird. |
 
-## Dependencies
-
-### Depends on
-
-- [kol-icon](../icon)
-- [kol-indented-text](../indented-text)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-details --> kol-icon
-  kol-details --> kol-indented-text
-  style kol-details stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/form/component.tsx b/packages/components/src/components/form/component.tsx
index e532210f4e..56f477e017 100644
--- a/packages/components/src/components/form/component.tsx
+++ b/packages/components/src/components/form/component.tsx
@@ -5,6 +5,7 @@ import { Component, h, Prop, State, Watch } from '@stencil/core';
 import { translate } from '../../i18n';
 
 import type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '@public-ui/schema';
+import { KolAlert, KolIndentedText, KolLink } from '../../core/component-names';
 /**
  * @slot - Inhalt der Form.
  */
@@ -47,33 +48,33 @@ export class KolForm implements FormAPI {
 		return (
 			<form method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
 				{this._errorList && this._errorList.length > 0 && (
-					<kol-alert _type="error">
+					<KolAlert _type="error">
 						{translate('kol-error-list-message')}
 						<nav aria-label={translate('kol-error-list')}>
 							<ul>
 								{this._errorList.map((error, index) => (
 									<li key={index}>
-										<kol-link
+										<KolLink
 											_href={error.selector}
 											_label={error.message}
 											_on={{ onClick: this.handleLinkClick }}
-											ref={(el) => {
-												if (index === 0) this.errorListElement = el as HTMLElement;
+											ref={(el: HTMLElement) => {
+												if (index === 0) this.errorListElement = el;
 											}}
 										/>
 									</li>
 								))}
 							</ul>
 						</nav>
-					</kol-alert>
+					</KolAlert>
 				)}
 				{this.state._requiredText === true ? (
 					<p>
-						<kol-indented-text>{translate('kol-form-description')}</kol-indented-text>
+						<KolIndentedText>{translate('kol-form-description')}</KolIndentedText>
 					</p>
 				) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (
 					<p>
-						<kol-indented-text>{this.state._requiredText}</kol-indented-text>
+						<KolIndentedText>{this.state._requiredText}</KolIndentedText>
 					</p>
 				) : null}
 				<slot />
diff --git a/packages/components/src/components/form/readme.md b/packages/components/src/components/form/readme.md
index 743b54afbe..ebb66bbaee 100644
--- a/packages/components/src/components/form/readme.md
+++ b/packages/components/src/components/form/readme.md
@@ -36,32 +36,4 @@ Die **Form**-Komponente dient dazu alle Eingabefelder zu umschließen, den Hinwe
 | ---- | ---------------- |
 |      | Inhalt der Form. |
 
-## Dependencies
-
-### Depends on
-
-- [kol-alert](../alert)
-- [kol-link](../link)
-- [kol-indented-text](../indented-text)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-form --> kol-alert
-  kol-form --> kol-link
-  kol-form --> kol-indented-text
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-link --> kol-link-wc
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-form stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/heading/readme.md b/packages/components/src/components/heading/readme.md
index 80692276fe..53e3fe231a 100644
--- a/packages/components/src/components/heading/readme.md
+++ b/packages/components/src/components/heading/readme.md
@@ -50,24 +50,4 @@ Die Überschriftenebene wird durch das Attribut **`_level`** übergeben. Möglic
 | ---- | ----------------------- |
 |      | Inhalt der Überschrift. |
 
-## Dependencies
-
-### Used by
-
-- [kol-accordion](../accordion)
-- [kol-alert-wc](../alert)
-- [kol-card](../card)
-- [kol-heading](.)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-accordion --> kol-heading-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-card --> kol-heading-wc
-  kol-heading --> kol-heading-wc
-  style kol-heading-wc stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/heading/shadow.tsx b/packages/components/src/components/heading/shadow.tsx
index 992a9315ca..65c955d3ff 100644
--- a/packages/components/src/components/heading/shadow.tsx
+++ b/packages/components/src/components/heading/shadow.tsx
@@ -1,6 +1,7 @@
 import type { HeadingLevel, HeadingProps, HeadingVariantPropType, LabelWithExpertSlotPropType } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Prop } from '@stencil/core';
+import { KolHeadingWc } from '../../core/component-names';
 
 /**
  * @slot headline - Content of the headline.
@@ -15,9 +16,9 @@ import { Component, h, Prop } from '@stencil/core';
 export class KolHeading implements HeadingProps {
 	public render(): JSX.Element {
 		return (
-			<kol-heading-wc _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline} _variant={this._variant}>
+			<KolHeadingWc _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline} _variant={this._variant}>
 				<slot name="expert" slot="expert" />
-			</kol-heading-wc>
+			</KolHeadingWc>
 		);
 	}
 
diff --git a/packages/components/src/components/icon/readme.md b/packages/components/src/components/icon/readme.md
index 32ee5b3f58..ea2cee7a89 100644
--- a/packages/components/src/components/icon/readme.md
+++ b/packages/components/src/components/icon/readme.md
@@ -61,25 +61,13 @@ Mittels der Property `_label` muss ein Kontext-relevantes Icon beschriftet werde
 
 ### Used by
 
-- [kol-alert-wc](../alert)
 - [kol-breadcrumb](../breadcrumb)
-- [kol-details](../details)
-- kol-input
-- [kol-input-checkbox](../input-checkbox)
-- kol-link-wc
-- kol-span-wc
 
 ### Graph
 
 ```mermaid
 graph TD;
-  kol-alert-wc --> kol-icon
   kol-breadcrumb --> kol-icon
-  kol-details --> kol-icon
-  kol-input --> kol-icon
-  kol-input-checkbox --> kol-icon
-  kol-link-wc --> kol-icon
-  kol-span-wc --> kol-icon
   style kol-icon stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/indented-text/readme.md b/packages/components/src/components/indented-text/readme.md
index bf188cf601..e456e44891 100644
--- a/packages/components/src/components/indented-text/readme.md
+++ b/packages/components/src/components/indented-text/readme.md
@@ -43,20 +43,4 @@ Verwenden Sie die **IndentedText**-Komponente, um Textpassagen oder Informatione
 | ---- | ----------- |
 |      | Der Text.   |
 
-## Dependencies
-
-### Used by
-
-- [kol-details](../details)
-- [kol-form](../form)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-details --> kol-indented-text
-  kol-form --> kol-indented-text
-  style kol-indented-text stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx
index 53e34eda54..5604f2e65b 100644
--- a/packages/components/src/components/input-checkbox/component.tsx
+++ b/packages/components/src/components/input-checkbox/component.tsx
@@ -25,6 +25,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputCheckboxController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolIcon, KolInput } from '../../core/component-names';
 
 /**
  * @slot expert - Die Beschriftung der Checkbox.
@@ -57,7 +58,7 @@ export class KolInputCheckbox implements InputCheckboxAPI {
 
 		return (
 			<Host>
-				<kol-input
+				<KolInput
 					class={{
 						checkbox: true,
 						[this.state._variant]: true,
@@ -95,7 +96,7 @@ export class KolInputCheckbox implements InputCheckboxAPI {
 						)}
 					</span>
 					<label slot="input" class="checkbox-container">
-						<kol-icon
+						<KolIcon
 							class="icon"
 							_icons={
 								this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked
@@ -122,7 +123,7 @@ export class KolInputCheckbox implements InputCheckboxAPI {
 							onClick={undefined} // onClick is not needed since onChange already triggers the correct event
 						/>
 					</label>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-checkbox/readme.md b/packages/components/src/components/input-checkbox/readme.md
index 4ca2e3abb5..7d8b5c37ee 100644
--- a/packages/components/src/components/input-checkbox/readme.md
+++ b/packages/components/src/components/input-checkbox/readme.md
@@ -95,30 +95,4 @@ Type: `Promise<boolean | undefined>`
 | ---------- | ------------------------------ |
 | `"expert"` | Die Beschriftung der Checkbox. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-- [kol-icon](../icon)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-checkbox --> kol-input
-  kol-input-checkbox --> kol-icon
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-checkbox stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-color/component.tsx b/packages/components/src/components/input-color/component.tsx
index 8ed24b9f5a..49e43ee233 100644
--- a/packages/components/src/components/input-color/component.tsx
+++ b/packages/components/src/components/input-color/component.tsx
@@ -23,6 +23,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputColorController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolInput } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -55,7 +56,7 @@ export class KolInputColor implements InputColorAPI {
 
 		return (
 			<Host>
-				<kol-input
+				<KolInput
 					class={{
 						color: true,
 						'hide-label': !!this.state._hideLabel,
@@ -111,7 +112,7 @@ export class KolInputColor implements InputColorAPI {
 							{...this.controller.onFacade}
 						/>
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-color/readme.md b/packages/components/src/components/input-color/readme.md
index d0ea5584ab..cd71d5fae9 100644
--- a/packages/components/src/components/input-color/readme.md
+++ b/packages/components/src/components/input-color/readme.md
@@ -83,28 +83,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-color --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-color stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-date/component.tsx b/packages/components/src/components/input-date/component.tsx
index 23291f83fc..70e52fe202 100644
--- a/packages/components/src/components/input-date/component.tsx
+++ b/packages/components/src/components/input-date/component.tsx
@@ -27,6 +27,7 @@ import type {
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '@public-ui/schema';
+import { KolInput } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -70,7 +71,7 @@ export class KolInputDate implements InputDateAPI {
 
 		return (
 			<Host class={{ 'has-value': this.state._hasValue }}>
-				<kol-input
+				<KolInput
 					class={{
 						[this.state._type]: true,
 						'hide-label': !!this.state._hideLabel,
@@ -131,7 +132,7 @@ export class KolInputDate implements InputDateAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-date/readme.md b/packages/components/src/components/input-date/readme.md
index ab74946b1c..e418287717 100644
--- a/packages/components/src/components/input-date/readme.md
+++ b/packages/components/src/components/input-date/readme.md
@@ -118,28 +118,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-date --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-date stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-email/component.tsx b/packages/components/src/components/input-email/component.tsx
index 193887429c..ed9a124684 100644
--- a/packages/components/src/components/input-email/component.tsx
+++ b/packages/components/src/components/input-email/component.tsx
@@ -25,6 +25,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputEmailController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolInput } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -73,7 +74,7 @@ export class KolInputEmail implements InputEmailAPI {
 					'has-value': this.state._hasValue,
 				}}
 			>
-				<kol-input
+				<KolInput
 					class={{ email: true, 'hide-label': !!this.state._hideLabel }}
 					_accessKey={this.state._accessKey}
 					_alert={this.state._alert}
@@ -138,7 +139,7 @@ export class KolInputEmail implements InputEmailAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-email/readme.md b/packages/components/src/components/input-email/readme.md
index 07971305f3..1aa52135d2 100644
--- a/packages/components/src/components/input-email/readme.md
+++ b/packages/components/src/components/input-email/readme.md
@@ -87,28 +87,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-email --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-email stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-file/component.tsx b/packages/components/src/components/input-file/component.tsx
index 5f16f8d724..e3f0c19cc3 100644
--- a/packages/components/src/components/input-file/component.tsx
+++ b/packages/components/src/components/input-file/component.tsx
@@ -22,6 +22,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputFileController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolInput } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -53,7 +54,7 @@ export class KolInputFile implements InputFileAPI {
 
 		return (
 			<Host>
-				<kol-input
+				<KolInput
 					class={{
 						file: true,
 						'hide-label': !!this.state._hideLabel,
@@ -110,7 +111,7 @@ export class KolInputFile implements InputFileAPI {
 							onChange={this.onChange}
 						/>
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-file/readme.md b/packages/components/src/components/input-file/readme.md
index 15f8061ad0..7e04a7b8d5 100644
--- a/packages/components/src/components/input-file/readme.md
+++ b/packages/components/src/components/input-file/readme.md
@@ -78,28 +78,4 @@ Type: `Promise<FileList | null | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-file --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-file stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-number/component.tsx b/packages/components/src/components/input-number/component.tsx
index 9dbfc64dd4..d8d29b68fb 100644
--- a/packages/components/src/components/input-number/component.tsx
+++ b/packages/components/src/components/input-number/component.tsx
@@ -25,6 +25,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputNumberController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolInput } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -72,7 +73,7 @@ export class KolInputNumber implements InputNumberAPI {
 					'has-value': this.state._hasValue,
 				}}
 			>
-				<kol-input
+				<KolInput
 					class={{
 						number: true,
 						'hide-label': !!this.state._hideLabel,
@@ -134,7 +135,7 @@ export class KolInputNumber implements InputNumberAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-number/readme.md b/packages/components/src/components/input-number/readme.md
index 2de5cb9ff0..fdc4303036 100644
--- a/packages/components/src/components/input-number/readme.md
+++ b/packages/components/src/components/input-number/readme.md
@@ -77,28 +77,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-number --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-number stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-password/component.tsx b/packages/components/src/components/input-password/component.tsx
index eab5256f5a..b2b19f0b6a 100644
--- a/packages/components/src/components/input-password/component.tsx
+++ b/packages/components/src/components/input-password/component.tsx
@@ -23,6 +23,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputPasswordController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolInput } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -70,7 +71,7 @@ export class KolInputPassword implements InputPasswordAPI {
 					'has-value': this.state._hasValue,
 				}}
 			>
-				<kol-input
+				<KolInput
 					class={{
 						'hide-label': !!this.state._hideLabel,
 						password: true,
@@ -134,7 +135,7 @@ export class KolInputPassword implements InputPasswordAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-password/readme.md b/packages/components/src/components/input-password/readme.md
index c8b0158ccc..77925a0876 100644
--- a/packages/components/src/components/input-password/readme.md
+++ b/packages/components/src/components/input-password/readme.md
@@ -77,28 +77,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-password --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-password stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-radio/component.tsx b/packages/components/src/components/input-radio/component.tsx
index efb8c92038..8777b88883 100644
--- a/packages/components/src/components/input-radio/component.tsx
+++ b/packages/components/src/components/input-radio/component.tsx
@@ -25,6 +25,7 @@ import { InputRadioController } from './controller';
 
 import type { JSX } from '@stencil/core';
 import { FormFieldMsg } from '../@shared/form-field-msg';
+import { KolInput } from '../../core/component-names';
 
 /**
  * @slot - Die Legende/Überschrift der Radiobuttons.
@@ -90,7 +91,7 @@ export class KolInputRadio implements InputRadioAPI {
 						const customId = `${this.state._id}-${index}`;
 						const slotName = `radio-${index}`;
 						return (
-							<kol-input
+							<KolInput
 								class={{
 									radio: true,
 									disabled: Boolean(this.state._disabled || option.disabled),
@@ -142,7 +143,7 @@ export class KolInputRadio implements InputRadioAPI {
 										</span>
 									</label>
 								</div>
-							</kol-input>
+							</KolInput>
 						);
 					})}
 					{hasError && <FormFieldMsg _alert={this.state._alert} _hideError={this.state._hideError} _error={this.state._error} _id={this.state._id} />}
diff --git a/packages/components/src/components/input-radio/readme.md b/packages/components/src/components/input-radio/readme.md
index e586069e64..0085f7f22e 100644
--- a/packages/components/src/components/input-radio/readme.md
+++ b/packages/components/src/components/input-radio/readme.md
@@ -115,25 +115,13 @@ Type: `Promise<W3CInputValue | undefined>`
 
 ### Depends on
 
-- kol-input
 - [kol-alert](../alert)
 
 ### Graph
 
 ```mermaid
 graph TD;
-  kol-input-radio --> kol-input
   kol-input-radio --> kol-alert
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
   style kol-input-radio stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/input-range/component.tsx b/packages/components/src/components/input-range/component.tsx
index d9ecea40e3..ebde1e2986 100644
--- a/packages/components/src/components/input-range/component.tsx
+++ b/packages/components/src/components/input-range/component.tsx
@@ -24,6 +24,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputRangeController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolInput } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabeelements.
  */
@@ -108,7 +109,7 @@ export class KolInputRange implements InputRangeAPI {
 
 		return (
 			<Host>
-				<kol-input
+				<KolInput
 					class={{
 						range: true,
 						'hide-label': !!this.state._hideLabel,
@@ -205,7 +206,7 @@ export class KolInputRange implements InputRangeAPI {
 							// </ul>,
 						]}
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-range/readme.md b/packages/components/src/components/input-range/readme.md
index 9f0db0ed40..109c4eeff5 100644
--- a/packages/components/src/components/input-range/readme.md
+++ b/packages/components/src/components/input-range/readme.md
@@ -88,28 +88,4 @@ Type: `Promise<number | undefined>`
 | ---- | ------------------------------------- |
 |      | Die Beschriftung des Eingabeelements. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-range --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-range stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-text/component.tsx b/packages/components/src/components/input-text/component.tsx
index 63516428be..b26be4203f 100644
--- a/packages/components/src/components/input-text/component.tsx
+++ b/packages/components/src/components/input-text/component.tsx
@@ -26,6 +26,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputTextController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolInput } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -84,7 +85,7 @@ export class KolInputText implements InputTextAPI {
 					'has-value': this.state._hasValue,
 				}}
 			>
-				<kol-input
+				<KolInput
 					class={{
 						[this.state._type]: true,
 						'hide-label': !!this.state._hideLabel,
@@ -151,7 +152,7 @@ export class KolInputText implements InputTextAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-text/readme.md b/packages/components/src/components/input-text/readme.md
index b37ada0df0..a180c1a0db 100644
--- a/packages/components/src/components/input-text/readme.md
+++ b/packages/components/src/components/input-text/readme.md
@@ -98,28 +98,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-text --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-text stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input/component.tsx b/packages/components/src/components/input/component.tsx
index fc9d58d71d..220e94b989 100644
--- a/packages/components/src/components/input/component.tsx
+++ b/packages/components/src/components/input/component.tsx
@@ -20,6 +20,7 @@ import type {
 } from '@public-ui/schema';
 import { FormFieldMsg } from '../@shared/form-field-msg';
 import type { Props } from './types';
+import { KolButtonWc, KolIcon, KolTooltipWc } from '../../core/component-names';
 
 /**
  * @internal
@@ -82,11 +83,11 @@ export class KolInput implements Props {
 					}}
 				>
 					{this._icons?.left && (
-						<kol-icon _label="" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></kol-icon>
+						<KolIcon _label="" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></KolIcon>
 					)}
 					<div ref={this.catchInputSlot} id={this.slotName} class="input-slot"></div>
 					{typeof this._smartButton === 'object' && this._smartButton !== null && (
-						<kol-button-wc
+						<KolButtonWc
 							_customClass={this._smartButton._customClass}
 							_disabled={this._smartButton._disabled}
 							_icons={this._smartButton._icons}
@@ -96,14 +97,14 @@ export class KolInput implements Props {
 							_on={this._smartButton._on}
 							_tooltipAlign={this._smartButton._tooltipAlign}
 							_variant={this._smartButton._variant}
-						></kol-button-wc>
+						></KolButtonWc>
 					)}
 					{this._icons?.right && (
-						<kol-icon _label="" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></kol-icon>
+						<KolIcon _label="" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIcon>
 					)}
 				</div>
 				{useTooltopInsteadOfLabel && (
-					<kol-tooltip-wc
+					<KolTooltipWc
 						/**
 						 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,
 						 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.
@@ -114,7 +115,7 @@ export class KolInput implements Props {
 						_align={this._tooltipAlign}
 						_id={this._hideLabel ? `${this._id}-label` : undefined}
 						_label={this._label}
-					></kol-tooltip-wc>
+					></KolTooltipWc>
 				)}
 				{hasError && <FormFieldMsg _alert={this._alert} _hideError={this._hideError} _error={this._error} _id={this._id} />}
 				{Array.isArray(this._suggestions) && this._suggestions.length > 0 && (
diff --git a/packages/components/src/components/link-button/component.tsx b/packages/components/src/components/link-button/component.tsx
index b713a68ade..173d3a7dcc 100644
--- a/packages/components/src/components/link-button/component.tsx
+++ b/packages/components/src/components/link-button/component.tsx
@@ -17,6 +17,7 @@ import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import { KolLinkWc } from '../../core/component-names';
 @Component({
 	tag: 'kol-link-button',
 	styleUrls: {
@@ -34,7 +35,7 @@ export class KolLinkButton implements LinkButtonProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<kol-link-wc
+				<KolLinkWc
 					ref={this.catchRef}
 					class={{
 						button: true,
@@ -56,7 +57,7 @@ export class KolLinkButton implements LinkButtonProps {
 					_tooltipAlign={this._tooltipAlign}
 				>
 					<slot name="expert" slot="expert"></slot>
-				</kol-link-wc>
+				</KolLinkWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/link-button/readme.md b/packages/components/src/components/link-button/readme.md
index 38e990b774..1673ce762d 100644
--- a/packages/components/src/components/link-button/readme.md
+++ b/packages/components/src/components/link-button/readme.md
@@ -47,23 +47,4 @@ Weitere Informationen zum Aussehen finden Sie auf der <kol-link _href="/docs/com
 | `_tooltipAlign`       | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                | `'right'`   |
 | `_variant`            | `_variant`            | Defines which variant should be used for presentation.                                                                                                       | `"custom" \| "danger" \| "ghost" \| "normal" \| "primary" \| "secondary" \| "tertiary" \| undefined` | `'normal'`  |
 
-## Dependencies
-
-### Depends on
-
-- kol-link-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-link-button --> kol-link-wc
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-link-button stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/link-group/component.tsx b/packages/components/src/components/link-group/component.tsx
index 5ddcc9ec09..1cd66c103e 100644
--- a/packages/components/src/components/link-group/component.tsx
+++ b/packages/components/src/components/link-group/component.tsx
@@ -6,6 +6,7 @@ import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from '../nav/validation';
 
 import type { JSX } from '@stencil/core';
+import { KolLink } from '../../core/component-names';
 const ListItem = (props: { links: LinkProps[]; orientation: Orientation; listStyleType: ListStyleType }): JSX.Element => {
 	const list: JSX.Element[] = [];
 	props.links.map((link, index: number) => {
@@ -21,7 +22,7 @@ const ListItem = (props: { links: LinkProps[]; orientation: Orientation; listSty
 						listStyleType: props.listStyleType,
 					}}
 				>
-					<kol-link {...link}></kol-link>
+					<KolLink {...link}></KolLink>
 				</li>
 			) as JSX.Element
 		);
diff --git a/packages/components/src/components/link-group/readme.md b/packages/components/src/components/link-group/readme.md
index de14c2f43c..256ae1f499 100644
--- a/packages/components/src/components/link-group/readme.md
+++ b/packages/components/src/components/link-group/readme.md
@@ -83,24 +83,4 @@ nemo, incidunt excepturi facilis, amet ducimus minus quae corporis eligendi cum
 | `_listStyleType`      | `_list-style-type` | Gibt den List-Style-Typen für ungeordnete Listen aus. Wird bei horizontalen LinkGroups als Trenner verwendet       | `"circle" \| "decimal" \| "decimal-leading-zero" \| "disc" \| "lower-alpha" \| "lower-greek" \| "lower-latin" \| "lower-roman" \| "none" \| "square" \| "upper-alpha" \| "upper-latin" \| "upper-roman" \| undefined` | `undefined`  |
 | `_orientation`        | `_orientation`     | Defines whether the orientation of the component is horizontal or vertical.                                        | `"horizontal" \| "vertical" \| undefined`                                                                                                                                                                             | `'vertical'` |
 
-## Dependencies
-
-### Depends on
-
-- [kol-link](../link)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-link-group --> kol-link
-  kol-link --> kol-link-wc
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-link-group stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx
index d8c37320d9..7bb487b5d6 100644
--- a/packages/components/src/components/link/component.tsx
+++ b/packages/components/src/components/link/component.tsx
@@ -41,6 +41,7 @@ import { validateDisabled } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import type { UnsubscribeFunction } from './ariaCurrentService';
 import { preventDefaultAndStopPropagation } from '../../utils/events';
+import { KolIcon, KolSpanWc, KolTooltipWc } from '../../core/component-names';
 /**
  * @internal
  */
@@ -132,16 +133,16 @@ export class KolLinkWc implements LinkAPI {
 					role={this.state._role}
 					tabIndex={this.state._disabled ? -1 : this.state._tabIndex}
 				>
-					<kol-span-wc
+					<KolSpanWc
 						_accessKey={this.state._accessKey}
 						_icons={this.state._icons}
 						_hideLabel={this.state._hideLabel}
 						_label={hasExpertSlot ? '' : this.state._label || this.state._href}
 					>
 						<slot name="expert" slot="expert"></slot>
-					</kol-span-wc>
+					</KolSpanWc>
 					{isExternal && (
-						<kol-icon
+						<KolIcon
 							class="external-link-icon"
 							_label={this.state._hideLabel ? '' : translate('kol-open-link-in-tab')}
 							_icons={'codicon codicon-link-external'}
@@ -149,7 +150,7 @@ export class KolLinkWc implements LinkAPI {
 						/>
 					)}
 				</a>
-				<kol-tooltip-wc
+				<KolTooltipWc
 					/**
 					 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,
 					 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.
@@ -159,7 +160,7 @@ export class KolLinkWc implements LinkAPI {
 					_accessKey={this.state._accessKey}
 					_align={this.state._tooltipAlign}
 					_label={this.state._label || this.state._href}
-				></kol-tooltip-wc>
+				></KolTooltipWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/link/readme.md b/packages/components/src/components/link/readme.md
index c9a62c12a5..fa9d848a1f 100644
--- a/packages/components/src/components/link/readme.md
+++ b/packages/components/src/components/link/readme.md
@@ -90,36 +90,4 @@ Der übergebene Location-String muss dabei exakt dem `href`-Attributs des Links
 | `_target`            | `_target`             | Defines where to open the link.                                                                                                                              | `string \| undefined`                                                                  | `undefined` |
 | `_tooltipAlign`      | `_tooltip-align`      | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                  | `'right'`   |
 
-## Dependencies
-
-### Used by
-
-- [kol-breadcrumb](../breadcrumb)
-- [kol-form](../form)
-- [kol-link-group](../link-group)
-- [kol-quote](../quote)
-- [kol-tree-item-wc](../tree-item)
-
-### Depends on
-
-- kol-link-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-link --> kol-link-wc
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-breadcrumb --> kol-link
-  kol-form --> kol-link
-  kol-link-group --> kol-link
-  kol-quote --> kol-link
-  kol-tree-item-wc --> kol-link
-  style kol-link stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
index 9357e2e92b..1b37664803 100644
--- a/packages/components/src/components/link/shadow.tsx
+++ b/packages/components/src/components/link/shadow.tsx
@@ -16,6 +16,7 @@ import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import { KolLinkWc } from '../../core/component-names';
 @Component({
 	tag: 'kol-link',
 	styleUrls: {
@@ -33,7 +34,7 @@ export class KolLink implements LinkProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<kol-link-wc
+				<KolLinkWc
 					ref={this.catchRef}
 					_accessKey={this._accessKey}
 					_ariaCurrentValue={this._ariaCurrentValue}
@@ -54,7 +55,7 @@ export class KolLink implements LinkProps {
 						die Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.
 					*/}
 					<slot name="expert" slot="expert"></slot>
-				</kol-link-wc>
+				</KolLinkWc>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/nav/component.tsx b/packages/components/src/components/nav/component.tsx
index fded1f9de7..5c02c0a611 100644
--- a/packages/components/src/components/nav/component.tsx
+++ b/packages/components/src/components/nav/component.tsx
@@ -27,6 +27,7 @@ import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from './validation';
 
 import type { JSX } from '@stencil/core';
+import { KolButton, KolButtonWc, KolLinkWc } from '../../core/component-names';
 const linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {
 	if (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {
 		if (Array.isArray(link._children)) {
@@ -90,9 +91,9 @@ export class KolNav implements NavAPI {
 		return (
 			<div class={{ entry: true, 'hide-label': hideLabel }}>
 				{'_href' in link ? (
-					<kol-link-wc class="entry-item" {...link} _hideLabel={hideLabel} _icons={icons} />
+					<KolLinkWc class="entry-item" {...link} _hideLabel={hideLabel} _icons={icons} />
 				) : (
-					<kol-button-wc
+					<KolButtonWc
 						class="entry-item"
 						_label={link._label}
 						_hideLabel={hideLabel}
@@ -108,7 +109,7 @@ export class KolNav implements NavAPI {
 
 	private expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {
 		return (
-			<kol-button-wc
+			<KolButtonWc
 				class="expand-button"
 				_ariaExpanded={expanded}
 				_disabled={!collapsible}
@@ -116,7 +117,7 @@ export class KolNav implements NavAPI {
 				_hideLabel
 				_label={`Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`}
 				_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}
-			></kol-button-wc>
+			></KolButtonWc>
 		);
 	}
 
@@ -210,7 +211,7 @@ export class KolNav implements NavAPI {
 					</nav>
 					{hasCompactButton && (
 						<div class="compact">
-							<kol-button
+							<KolButton
 								_ariaControls="nav"
 								_ariaExpanded={!hideLabel}
 								_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}
@@ -226,7 +227,7 @@ export class KolNav implements NavAPI {
 								}}
 								_tooltipAlign="right"
 								_variant="ghost"
-							></kol-button>
+							></KolButton>
 						</div>
 					)}
 				</div>
diff --git a/packages/components/src/components/nav/readme.md b/packages/components/src/components/nav/readme.md
index 092a1c676b..bf91fb58e4 100644
--- a/packages/components/src/components/nav/readme.md
+++ b/packages/components/src/components/nav/readme.md
@@ -121,27 +121,4 @@ Die Ausrichtung der Navigationsleiste kann mit dem Attribut **`_orientation`** u
 | `_links` _(required)_   | `_links`                   | Defines the list of links, buttons or texts to render.                                                                                     | `ButtonOrLinkOrTextWithChildrenProps[] \| string` | `undefined`  |
 | `_orientation`          | `_orientation`             | Defines whether the orientation of the component is horizontal or vertical.                                                                | `"horizontal" \| "vertical" \| undefined`         | `'vertical'` |
 
-## Dependencies
-
-### Depends on
-
-- kol-link-wc
-- kol-button-wc
-- [kol-button](../button)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-nav --> kol-link-wc
-  kol-nav --> kol-button-wc
-  kol-nav --> kol-button
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-nav stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/pagination/component.tsx b/packages/components/src/components/pagination/component.tsx
index c8f4a9ed9c..edbe9704b1 100644
--- a/packages/components/src/components/pagination/component.tsx
+++ b/packages/components/src/components/pagination/component.tsx
@@ -21,13 +21,14 @@ import {
 	watchNumber,
 	watchValidator,
 } from '@public-ui/schema';
+import type { JSX } from '@stencil/core';
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { translate } from '../../i18n';
 import { nonce } from '../../utils/dev.utils';
 import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
+import { KolButtonWc, KolSelect } from '../../core/component-names';
 
-import type { JSX } from '@stencil/core';
 const leftDoubleArrowIcon = {
 	left: 'codicon codicon-debug-reverse-continue',
 };
@@ -90,7 +91,7 @@ export class KolPagination implements PaginationAPI {
 					<ul class="navigation-list">
 						{this.state._hasButtons.first && (
 							<li>
-								<kol-button-wc
+								<KolButtonWc
 									class="first"
 									exportparts="icon"
 									_customClass={this.state._customClass}
@@ -100,12 +101,12 @@ export class KolPagination implements PaginationAPI {
 									_label={translate('kol-page-first')}
 									_on={this.onGoToFirst}
 									_tooltipAlign={this.state._tooltipAlign}
-								></kol-button-wc>
+								></KolButtonWc>
 							</li>
 						)}
 						{this.state._hasButtons.previous && (
 							<li>
-								<kol-button-wc
+								<KolButtonWc
 									class="previous"
 									exportparts="icon"
 									_customClass={this.state._customClass}
@@ -115,13 +116,13 @@ export class KolPagination implements PaginationAPI {
 									_label={translate('kol-page-back')}
 									_on={this.onGoBackward}
 									_tooltipAlign={this.state._tooltipAlign}
-								></kol-button-wc>
+								></KolButtonWc>
 							</li>
 						)}
 						{pageButtons}
 						{this.state._hasButtons.next && (
 							<li>
-								<kol-button-wc
+								<KolButtonWc
 									class="next"
 									exportparts="icon"
 									_customClass={this.state._customClass}
@@ -131,12 +132,12 @@ export class KolPagination implements PaginationAPI {
 									_label={translate('kol-page-next')}
 									_on={this.onGoForward}
 									_tooltipAlign={this.state._tooltipAlign}
-								></kol-button-wc>
+								></KolButtonWc>
 							</li>
 						)}
 						{this.state._hasButtons.last && (
 							<li>
-								<kol-button-wc
+								<KolButtonWc
 									class="last"
 									exportparts="icon"
 									_customClass={this.state._customClass}
@@ -146,13 +147,13 @@ export class KolPagination implements PaginationAPI {
 									_label={translate('kol-page-last')}
 									_on={this.onGoToEnd}
 									_tooltipAlign={this.state._tooltipAlign}
-								></kol-button-wc>
+								></KolButtonWc>
 							</li>
 						)}
 					</ul>
 				</nav>
 				{this.state._pageSizeOptions?.length > 0 && (
-					<kol-select
+					<KolSelect
 						_hideLabel
 						_id={`pagination-size-${this.nonce}`}
 						_label={translate('kol-entries-per-site')}
@@ -161,7 +162,7 @@ export class KolPagination implements PaginationAPI {
 							onChange: this.onChangePageSize,
 						}}
 						_value={[this.state._pageSize]}
-					></kol-select>
+					></KolSelect>
 				)}
 			</Host>
 		);
@@ -294,7 +295,7 @@ export class KolPagination implements PaginationAPI {
 	private getUnselectedPageButton(page: number): JSX.Element {
 		return (
 			<li>
-				<kol-button-wc
+				<KolButtonWc
 					exportparts="icon"
 					key={`${this.nonce}-${page}`}
 					_customClass={this.state._customClass}
@@ -308,7 +309,7 @@ export class KolPagination implements PaginationAPI {
 					<span slot="expert">
 						<span class="visually-hidden">{translate('kol-page')}</span> {page}
 					</span>
-				</kol-button-wc>
+				</KolButtonWc>
 			</li>
 		);
 	}
@@ -316,11 +317,11 @@ export class KolPagination implements PaginationAPI {
 	private getSelectedPageButton(page: number): JSX.Element {
 		return (
 			<li>
-				<kol-button-wc class="selected" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label="">
+				<KolButtonWc class="selected" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label="">
 					<span slot="expert">
 						<span class="visually-hidden">{translate('kol-page')}</span> {page}
 					</span>
-				</kol-button-wc>
+				</KolButtonWc>
 			</li>
 		);
 	}
diff --git a/packages/components/src/components/pagination/readme.md b/packages/components/src/components/pagination/readme.md
index 84f40ee84e..78b981fe16 100644
--- a/packages/components/src/components/pagination/readme.md
+++ b/packages/components/src/components/pagination/readme.md
@@ -59,36 +59,4 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte
 | `_siblingCount`      | `_sibling-count`     | Defines the amount of pages to show next to the current page.                                                      | `number \| undefined`                                                                                                                                                                                                  | `1`         |
 | `_tooltipAlign`      | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                          | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                  | `'top'`     |
 
-## Dependencies
-
-### Used by
-
-- [kol-table](../table)
-
-### Depends on
-
-- kol-button-wc
-- [kol-select](../select)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-pagination --> kol-button-wc
-  kol-pagination --> kol-select
-  kol-select --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-table --> kol-pagination
-  style kol-pagination stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/quote/readme.md b/packages/components/src/components/quote/readme.md
index 87767263a0..be0dbb32d3 100644
--- a/packages/components/src/components/quote/readme.md
+++ b/packages/components/src/components/quote/readme.md
@@ -73,24 +73,4 @@ Die `inline`-Variante ist Standard, sofern die Eingerückte gewünscht ist, kann
 | `_quote` _(required)_ | `_quote`   | Defines the text of the quote.                                                                                     | `string`                           | `undefined` |
 | `_variant`            | `_variant` | Defines which variant should be used for presentation.                                                             | `"block" \| "inline" \| undefined` | `'inline'`  |
 
-## Dependencies
-
-### Depends on
-
-- [kol-link](../link)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-quote --> kol-link
-  kol-link --> kol-link-wc
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-quote stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/quote/shadow.tsx b/packages/components/src/components/quote/shadow.tsx
index 0e7d4e0bb7..cac8967f6e 100644
--- a/packages/components/src/components/quote/shadow.tsx
+++ b/packages/components/src/components/quote/shadow.tsx
@@ -3,6 +3,7 @@ import { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString,
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import { KolLink } from '../../core/component-names';
 @Component({
 	tag: 'kol-quote',
 	styleUrls: {
@@ -101,7 +102,7 @@ export class KolQuote implements QuoteAPI {
 					{typeof this.state._label === 'string' && this.state._label.length > 0 && (
 						<figcaption>
 							<cite>
-								<kol-link _href={this.state._href} _label={this.state._label} _target="_blank" />
+								<KolLink _href={this.state._href} _label={this.state._label} _target="_blank" />
 							</cite>
 						</figcaption>
 					)}
diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx
index 89b993c202..cb9bf3df91 100644
--- a/packages/components/src/components/select/component.tsx
+++ b/packages/components/src/components/select/component.tsx
@@ -27,6 +27,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { SelectController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolInput } from '../../core/component-names';
 const isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {
 	return Array.isArray(valueList) && valueList.includes(optionValue);
 };
@@ -87,7 +88,7 @@ export class KolSelect implements SelectAPI {
 
 		return (
 			<Host class={{ 'has-value': this.state._hasValue }}>
-				<kol-input
+				<KolInput
 					class={{
 						'hide-label': !!this.state._hideLabel,
 						select: true,
@@ -169,7 +170,7 @@ export class KolSelect implements SelectAPI {
 							})}
 						</select>
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/select/readme.md b/packages/components/src/components/select/readme.md
index 6843aa30c2..64d70f8055 100644
--- a/packages/components/src/components/select/readme.md
+++ b/packages/components/src/components/select/readme.md
@@ -126,33 +126,4 @@ Type: `Promise<Stringified<W3CInputValue[]> | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Used by
-
-- [kol-pagination](../pagination)
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-select --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-pagination --> kol-select
-  style kol-select stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/skip-nav/component.tsx b/packages/components/src/components/skip-nav/component.tsx
index 35147f5ff4..64d5a3f9e5 100644
--- a/packages/components/src/components/skip-nav/component.tsx
+++ b/packages/components/src/components/skip-nav/component.tsx
@@ -6,6 +6,7 @@ import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from '../nav/validation';
 
 import type { JSX } from '@stencil/core';
+import { KolLinkWc } from '../../core/component-names';
 @Component({
 	tag: 'kol-skip-nav',
 	styleUrls: {
@@ -21,7 +22,7 @@ export class KolSkipNav implements SkipNavAPI {
 					{this.state._links.map((link: LinkProps, index: number) => {
 						return (
 							<li key={index}>
-								<kol-link-wc {...link}></kol-link-wc>
+								<KolLinkWc {...link}></KolLinkWc>
 							</li>
 						);
 					})}
diff --git a/packages/components/src/components/skip-nav/readme.md b/packages/components/src/components/skip-nav/readme.md
index e48fdd8db8..08551eff6c 100644
--- a/packages/components/src/components/skip-nav/readme.md
+++ b/packages/components/src/components/skip-nav/readme.md
@@ -58,23 +58,4 @@ Die **SkipNav** wird durch Übergabe eines JSON-Objekts erzeugt, das für das Re
 | `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                | `undefined` |
 | `_links` _(required)_ | `_links`  | Defines the list of links combined with their labels to render.                                                    | `LinkProps[] \| string` | `undefined` |
 
-## Dependencies
-
-### Depends on
-
-- kol-link-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-skip-nav --> kol-link-wc
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  style kol-skip-nav stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/span/component.tsx b/packages/components/src/components/span/component.tsx
index a246ca085d..9fd8e6e478 100644
--- a/packages/components/src/components/span/component.tsx
+++ b/packages/components/src/components/span/component.tsx
@@ -6,6 +6,7 @@ import { md } from '../../utils/markdown';
 import { InternalUnderlinedAccessKey } from './InternalUnderlinedAccessKey';
 
 import type { JSX } from '@stencil/core';
+import { KolIcon } from '../../core/component-names';
 /**
  * @internal
  */
@@ -23,11 +24,11 @@ export class KolSpanWc implements SpanAPI {
 				}}
 			>
 				{this.state._icons.top && (
-					<kol-icon class="icon top" style={this.state._icons.top.style} _label={this.state._icons.top.label ?? ''} _icons={this.state._icons.top.icon} />
+					<KolIcon class="icon top" style={this.state._icons.top.style} _label={this.state._icons.top.label ?? ''} _icons={this.state._icons.top.icon} />
 				)}
 				<span>
 					{this.state._icons.left && (
-						<kol-icon class="icon left" style={this.state._icons.left.style} _label={this.state._icons.left.label ?? ''} _icons={this.state._icons.left.icon} />
+						<KolIcon class="icon left" style={this.state._icons.left.style} _label={this.state._icons.left.label ?? ''} _icons={this.state._icons.left.icon} />
 					)}
 					{!this.state._hideLabel && hideExpertSlot ? (
 						this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (
@@ -53,7 +54,7 @@ export class KolSpanWc implements SpanAPI {
 						</span>
 					)}
 					{this.state._icons.right && (
-						<kol-icon
+						<KolIcon
 							class="icon right"
 							style={this.state._icons.right.style}
 							_label={this.state._icons.right.label ?? ''}
@@ -62,7 +63,7 @@ export class KolSpanWc implements SpanAPI {
 					)}
 				</span>
 				{this.state._icons.bottom && (
-					<kol-icon
+					<KolIcon
 						class="icon bottom"
 						style={this.state._icons.bottom.style}
 						_label={this.state._icons.bottom.label ?? ''}
diff --git a/packages/components/src/components/span/readme.md b/packages/components/src/components/span/readme.md
index d8b0cb3991..55ceacaf04 100644
--- a/packages/components/src/components/span/readme.md
+++ b/packages/components/src/components/span/readme.md
@@ -27,19 +27,4 @@ Die **Span**-Komponente dient dazu innerhalb zahlreicher KoliBri-Komponenten die
 | `_icons`              | `_icons`      | Defines the g classnames (e.g. `_icons="fa-solid fa-user"`).                                                                                                 | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined` | `undefined` |
 | `_label` _(required)_ | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                               | `undefined` |
 
-## Dependencies
-
-### Depends on
-
-- kol-span-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-span --> kol-span-wc
-  kol-span-wc --> kol-icon
-  style kol-span stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/span/shadow.tsx b/packages/components/src/components/span/shadow.tsx
index 290b00ef39..2e2bd8ed04 100644
--- a/packages/components/src/components/span/shadow.tsx
+++ b/packages/components/src/components/span/shadow.tsx
@@ -1,6 +1,7 @@
 import type { AccessKeyPropType, KoliBriIconsProp, LabelWithExpertSlotPropType, SpanProps, Stringified } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Prop } from '@stencil/core';
+import { KolSpanWc } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-span',
@@ -12,9 +13,9 @@ import { Component, h, Prop } from '@stencil/core';
 export class KolSpan implements SpanProps {
 	public render(): JSX.Element {
 		return (
-			<kol-span-wc _icons={this._icons} _hideLabel={this._hideLabel} _label={this._label} _accessKey={this._accessKey}>
+			<KolSpanWc _icons={this._icons} _hideLabel={this._hideLabel} _label={this._label} _accessKey={this._accessKey}>
 				<slot name="expert" slot="expert"></slot>
-			</kol-span-wc>
+			</KolSpanWc>
 		);
 	}
 
diff --git a/packages/components/src/components/split-button/component.tsx b/packages/components/src/components/split-button/component.tsx
index c6fb37c7e1..4a07d501c2 100644
--- a/packages/components/src/components/split-button/component.tsx
+++ b/packages/components/src/components/split-button/component.tsx
@@ -15,6 +15,7 @@ import type {
 } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Host, Prop, State } from '@stencil/core';
+import { KolButtonWc } from '../../core/component-names';
 
 /**
  * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.
@@ -72,7 +73,7 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<kol-button-wc
+				<KolButtonWc
 					class={{
 						'main-button': true,
 						button: true,
@@ -96,16 +97,16 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 					_type={this._type}
 					_value={this._value}
 					_variant={this._variant}
-				></kol-button-wc>
+				></KolButtonWc>
 				<div class="horizontal-line"></div>
-				<kol-button-wc
+				<KolButtonWc
 					class="secondary-button"
 					_disabled={this._disabled}
 					_hideLabel
 					_icons="codicon codicon-triangle-down"
 					_label={`dropdown ${this.state._show ? 'schließen' : 'öffnen'}`} // @todo: translate
 					_on={this.clickToggleHandler}
-				></kol-button-wc>
+				></KolButtonWc>
 				<div class="popover" ref={this.catchDropdownElements}>
 					<div class="popover-content">
 						<slot />
diff --git a/packages/components/src/components/split-button/readme.md b/packages/components/src/components/split-button/readme.md
index 0fd0180309..069f5310af 100644
--- a/packages/components/src/components/split-button/readme.md
+++ b/packages/components/src/components/split-button/readme.md
@@ -53,18 +53,4 @@ dem sich weitere Aktionen verbergen.
 | ---- | --------------------------------------------------------- |
 |      | Ermöglicht das Einfügen beliebigen HTMLs in das dropdown. |
 
-## Dependencies
-
-### Depends on
-
-- kol-button-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-split-button --> kol-button-wc
-  style kol-split-button stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/table/component.tsx b/packages/components/src/components/table/component.tsx
index d903cfd103..da5fe35d60 100644
--- a/packages/components/src/components/table/component.tsx
+++ b/packages/components/src/components/table/component.tsx
@@ -25,6 +25,7 @@ import type {
 	TableStates,
 } from '@public-ui/schema';
 import { validatePaginationPosition } from '@public-ui/schema';
+import { KolButton, KolButtonWc, KolPagination } from '../../core/component-names';
 const PAGINATION_OPTIONS = [10, 20, 50, 100];
 
 const CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();
@@ -741,7 +742,7 @@ export class KolTable implements TableAPI {
 							{headerCell.label}
 						</div>
 						{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (
-							<kol-button
+							<KolButton
 								exportparts="icon"
 								_icons={sortButtonIcon}
 								_hideLabel
@@ -750,7 +751,7 @@ export class KolTable implements TableAPI {
 									onClick: () => this.changeCellSort(headerCell),
 								}}
 								_variant="ghost"
-							></kol-button>
+							></KolButton>
 						)}
 					</div>
 				</th>
@@ -805,7 +806,7 @@ export class KolTable implements TableAPI {
 					})}
 				</span>
 				<div>
-					<kol-pagination
+					<KolPagination
 						_boundaryCount={this.state._pagination._boundaryCount}
 						_customClass={this.state._pagination._customClass}
 						_on={this.handlePagination}
@@ -816,7 +817,7 @@ export class KolTable implements TableAPI {
 						_tooltipAlign="bottom"
 						_max={this.state._pagination._max || this.state._pagination._max || this.state._data.length}
 						_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}
-					></kol-pagination>
+					></KolPagination>
 				</div>
 			</div>
 		);
@@ -933,7 +934,7 @@ export class KolTable implements TableAPI {
 														data-sort={`sort-${shortSortDirection}`}
 													>
 														{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') ? (
-															<kol-button-wc
+															<KolButtonWc
 																class="table-sort-button"
 																exportparts="icon"
 																_icons={{ right: sortButtonIcon }}
@@ -941,7 +942,7 @@ export class KolTable implements TableAPI {
 																_on={{
 																	onClick: () => this.changeCellSort(headerCell),
 																}}
-															></kol-button-wc>
+															></KolButtonWc>
 														) : (
 															col.label
 														)}
diff --git a/packages/components/src/components/table/readme.md b/packages/components/src/components/table/readme.md
index 342515cb92..6d8cedfe4d 100644
--- a/packages/components/src/components/table/readme.md
+++ b/packages/components/src/components/table/readme.md
@@ -186,35 +186,4 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr
 | `_pagination`           | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean \| string \| undefined \| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \| undefined; _page?: number \| undefined; _max?: number \| undefined; _boundaryCount?: number \| undefined; _hasButtons?: boolean \| Stringified<PaginationHasButton> \| undefined; _pageSize?: number \| undefined; _pageSizeOptions?: Stringified<number[]> \| undefined; _siblingCount?: number \| undefined; _customClass?: string \| undefined; _label?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` |
 | `_paginationPosition`   | `_pagination-position` | Controls the position of the pagination.                                                                           | `"both" \| "bottom" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'bottom'`  |
 
-## Dependencies
-
-### Depends on
-
-- [kol-button](../button)
-- [kol-pagination](../pagination)
-- kol-button-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-table --> kol-button
-  kol-table --> kol-pagination
-  kol-table --> kol-button-wc
-  kol-pagination --> kol-button-wc
-  kol-pagination --> kol-select
-  kol-select --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-table stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/tabs/component.tsx b/packages/components/src/components/tabs/component.tsx
index 3e6a34fce2..56bbab372e 100644
--- a/packages/components/src/components/tabs/component.tsx
+++ b/packages/components/src/components/tabs/component.tsx
@@ -27,6 +27,7 @@ import { translate } from '../../i18n';
 
 import type { JSX } from '@stencil/core';
 import type { Generic } from 'adopted-style-sheets';
+import { KolButtonGroupWc, KolButtonWc } from '../../core/component-names';
 // https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
 
 @Component({
@@ -102,9 +103,9 @@ export class KolTabs implements TabsAPI {
 
 	private renderButtonGroup() {
 		return (
-			<kol-button-group-wc class="tabs-button-group" role="tablist" aria-label={this.state._label} onKeyDown={this.onKeyDown}>
+			<KolButtonGroupWc class="tabs-button-group" role="tablist" aria-label={this.state._label} onKeyDown={this.onKeyDown}>
 				{this.state._tabs.map((button: TabButtonProps, index: number) => (
-					<kol-button-wc
+					<KolButtonWc
 						_disabled={button._disabled}
 						_icons={button._icons}
 						_hideLabel={button._hideLabel}
@@ -119,18 +120,18 @@ export class KolTabs implements TabsAPI {
 						_id={`${this.state._label.replace(/\s/g, '-')}-tab-${index}`}
 						_role="tab"
 						_value={index}
-					></kol-button-wc>
+					></KolButtonWc>
 				))}
 				{this.showCreateTab && (
-					<kol-button-wc
+					<KolButtonWc
 						class="create-button"
 						_label={this.onCreateLabel}
 						_on={{
 							onClick: this.onCreate,
 						}}
-					></kol-button-wc>
+					></KolButtonWc>
 				)}
-			</kol-button-group-wc>
+			</KolButtonGroupWc>
 		);
 	}
 
diff --git a/packages/components/src/components/tabs/readme.md b/packages/components/src/components/tabs/readme.md
index 33e7b3a1d1..4e7f3abc7f 100644
--- a/packages/components/src/components/tabs/readme.md
+++ b/packages/components/src/components/tabs/readme.md
@@ -98,20 +98,4 @@ Hier steht immer der beeinträchtige Nutzende im Vordergrund. Um möglichst effi
 | `_selected`           | `_selected` | Defines which tab is active.                                                                                       | `number \| undefined`                                                                                                                                                                                                                                    | `0`         |
 | `_tabs` _(required)_  | `_tabs`     | Defines the tab captions.                                                                                          | `TabButtonProps[] \| string`                                                                                                                                                                                                                             | `undefined` |
 
-## Dependencies
-
-### Depends on
-
-- [kol-button-group-wc](../button-group)
-- kol-button-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-tabs --> kol-button-group-wc
-  kol-tabs --> kol-button-wc
-  style kol-tabs stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/textarea/component.tsx b/packages/components/src/components/textarea/component.tsx
index 6885ff96ae..5dfe966a51 100644
--- a/packages/components/src/components/textarea/component.tsx
+++ b/packages/components/src/components/textarea/component.tsx
@@ -22,6 +22,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { TextareaController } from './controller';
 
 import type { JSX } from '@stencil/core';
+import { KolInput } from '../../core/component-names';
 /**
  * https://stackoverflow.com/questions/17772260/textarea-auto-height
  */
@@ -66,7 +67,7 @@ export class KolTextarea implements TextareaAPI {
 
 		return (
 			<Host class={{ 'has-value': this.state._hasValue }}>
-				<kol-input
+				<KolInput
 					class={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}
 					_accessKey={this.state._accessKey}
 					_alert={this.state._alert}
@@ -127,7 +128,7 @@ export class KolTextarea implements TextareaAPI {
 							value={this.state._value}
 						/>
 					</div>
-				</kol-input>
+				</KolInput>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/textarea/readme.md b/packages/components/src/components/textarea/readme.md
index fb7a2f1eeb..259432429f 100644
--- a/packages/components/src/components/textarea/readme.md
+++ b/packages/components/src/components/textarea/readme.md
@@ -92,28 +92,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-textarea --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-textarea stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/toaster/component.tsx b/packages/components/src/components/toaster/component.tsx
index e12cf56b48..3ef3c37edd 100644
--- a/packages/components/src/components/toaster/component.tsx
+++ b/packages/components/src/components/toaster/component.tsx
@@ -6,6 +6,7 @@ import { nonce } from '../../utils/dev.utils';
 import { InternalToast } from './InternalToast';
 
 import type { Toast, ToasterAPI, ToasterStates, ToastState } from '@public-ui/schema';
+import { KolButton } from '../../core/component-names';
 const TRANSITION_TIMEOUT = 300;
 
 @Component({
@@ -95,7 +96,7 @@ export class KolToastContainer implements ToasterAPI {
 		return (
 			<>
 				{this.state._toastStates.length > 1 && (
-					<kol-button
+					<KolButton
 						_label={translate('kol-toast-close-all')}
 						class="close-all"
 						_on={{
@@ -103,7 +104,7 @@ export class KolToastContainer implements ToasterAPI {
 								void this.closeAll();
 							},
 						}}
-					></kol-button>
+					></KolButton>
 				)}
 				{this.state._toastStates.map((toastState) => (
 					<InternalToast toastState={toastState} onClose={() => this.handleClose(toastState)} key={toastState.id} />
diff --git a/packages/components/src/components/toaster/readme.md b/packages/components/src/components/toaster/readme.md
index 0daacb87aa..0d3af52823 100644
--- a/packages/components/src/components/toaster/readme.md
+++ b/packages/components/src/components/toaster/readme.md
@@ -94,19 +94,13 @@ Type: `Promise<() => void>`
 
 ### Depends on
 
-- [kol-button](../button)
 - [kol-alert](../alert)
 
 ### Graph
 
 ```mermaid
 graph TD;
-  kol-toast-container --> kol-button
   kol-toast-container --> kol-alert
-  kol-alert --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
   style kol-toast-container stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/tooltip/component.tsx b/packages/components/src/components/tooltip/component.tsx
index 4263c44a2b..9f83dc4a71 100644
--- a/packages/components/src/components/tooltip/component.tsx
+++ b/packages/components/src/components/tooltip/component.tsx
@@ -6,6 +6,7 @@ import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { alignFloatingElements } from '../../utils/align-floating-elements';
 import { hideOverlay, showOverlay } from '../../utils/overlay';
+import { KolSpanWc } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-tooltip-wc',
@@ -126,7 +127,7 @@ export class KolTooltip implements TooltipAPI {
 				{this.state._label !== '' && (
 					<div class="tooltip-floating" ref={this.catchTooltipElement}>
 						<div class="tooltip-area tooltip-arrow" ref={this.catchArrowElement} />
-						<kol-span-wc class="tooltip-area tooltip-content" id={this.state._id} _accessKey={this._accessKey} _label={this.state._label}></kol-span-wc>
+						<KolSpanWc class="tooltip-area tooltip-content" id={this.state._id} _accessKey={this._accessKey} _label={this.state._label}></KolSpanWc>
 					</div>
 				)}
 			</Host>
diff --git a/packages/components/src/components/tooltip/readme.md b/packages/components/src/components/tooltip/readme.md
index 15ba39809c..f97469176c 100644
--- a/packages/components/src/components/tooltip/readme.md
+++ b/packages/components/src/components/tooltip/readme.md
@@ -42,28 +42,4 @@ Um die Breite eines Tooltips zu konfigurieren, kann auf dem umgebenden Container
 | `_id`                 | `_id`         | Defines the internal ID of the primary component element.                                                          | `string \| undefined`                                 | `undefined` |
 | `_label` _(required)_ | `_label`      | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                              | `undefined` |
 
-## Dependencies
-
-### Used by
-
-- [kol-abbr](../abbr)
-- kol-input
-- kol-link-wc
-
-### Depends on
-
-- kol-span-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-tooltip-wc --> kol-span-wc
-  kol-span-wc --> kol-icon
-  kol-abbr --> kol-tooltip-wc
-  kol-input --> kol-tooltip-wc
-  kol-link-wc --> kol-tooltip-wc
-  style kol-tooltip-wc stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/tree-item/component.tsx b/packages/components/src/components/tree-item/component.tsx
index c04c239443..85ac773883 100644
--- a/packages/components/src/components/tree-item/component.tsx
+++ b/packages/components/src/components/tree-item/component.tsx
@@ -2,6 +2,7 @@ import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } fro
 
 import type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '@public-ui/schema';
 import { validateActive, validateHref, validateLabel, validateOpen } from '@public-ui/schema';
+import { KolLink } from '../../core/component-names';
 
 @Component({
 	tag: `kol-tree-item-wc`,
@@ -16,14 +17,14 @@ export class KolTreeItemWc implements TreeItemAPI {
 		return (
 			<Host onSlotchange={this.handleSlotchange.bind(this)}>
 				<li class="tree-item">
-					<kol-link
+					<KolLink
 						class={{
 							'tree-link': true,
 							active: Boolean(this.state._active),
 						}}
 						_label=""
 						_href={this.state._href}
-						ref={(element) => (this.linkElement = element!)}
+						ref={(element: HTMLKolLinkWcElement) => (this.linkElement = element!)}
 						_tabIndex={this.state._active ? 0 : -1}
 					>
 						<span slot="expert">
@@ -41,7 +42,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 								))}{' '}
 							{this.state._label}
 						</span>
-					</kol-link>
+					</KolLink>
 					<ul hidden={!this.state._hasChildren || !this.state._open} role="group">
 						<slot />
 					</ul>
diff --git a/packages/components/src/components/tree-item/readme.md b/packages/components/src/components/tree-item/readme.md
index 2b876ca23f..0ae4380764 100644
--- a/packages/components/src/components/tree-item/readme.md
+++ b/packages/components/src/components/tree-item/readme.md
@@ -37,29 +37,4 @@ Type: `Promise<void>`
 
 Type: `Promise<boolean>`
 
-## Dependencies
-
-### Used by
-
-- [kol-tree-item](.)
-
-### Depends on
-
-- [kol-link](../link)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-tree-item-wc --> kol-link
-  kol-link --> kol-link-wc
-  kol-link-wc --> kol-span-wc
-  kol-link-wc --> kol-icon
-  kol-link-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-tree-item --> kol-tree-item-wc
-  style kol-tree-item-wc stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/tree-item/shadow.tsx b/packages/components/src/components/tree-item/shadow.tsx
index 574cd226e6..43f904556a 100644
--- a/packages/components/src/components/tree-item/shadow.tsx
+++ b/packages/components/src/components/tree-item/shadow.tsx
@@ -1,6 +1,7 @@
 import { Component, h, type JSX, Method, Prop } from '@stencil/core';
 
 import type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '@public-ui/schema';
+import { KolTreeItemWc } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`
@@ -56,7 +57,7 @@ export class KolTreeItem implements TreeItemProps {
 
 	public render(): JSX.Element {
 		return (
-			<kol-tree-item-wc
+			<KolTreeItemWc
 				_active={this._active}
 				_label={this._label}
 				_open={this._open}
@@ -64,7 +65,7 @@ export class KolTreeItem implements TreeItemProps {
 				ref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}
 			>
 				<slot />
-			</kol-tree-item-wc>
+			</KolTreeItemWc>
 		);
 	}
 }
diff --git a/packages/components/src/components/tree/readme.md b/packages/components/src/components/tree/readme.md
index b8f3a97f20..cf50ca4704 100644
--- a/packages/components/src/components/tree/readme.md
+++ b/packages/components/src/components/tree/readme.md
@@ -12,18 +12,4 @@
 | --------------------- | --------- | ------------------------------ | -------- | ----------- |
 | `_label` _(required)_ | `_label`  | Defines the label of the tree. | `string` | `undefined` |
 
-## Dependencies
-
-### Used by
-
-- [kol-tree](.)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-tree --> kol-tree-wc
-  style kol-tree-wc stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/tree/shadow.tsx b/packages/components/src/components/tree/shadow.tsx
index 4e40086160..5706fbf86b 100644
--- a/packages/components/src/components/tree/shadow.tsx
+++ b/packages/components/src/components/tree/shadow.tsx
@@ -2,6 +2,7 @@ import type { JSX } from '@stencil/core';
 import { Component, h, Prop } from '@stencil/core';
 
 import type { LabelPropType, TreeProps } from '@public-ui/schema';
+import { KolTreeWc } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-tree',
@@ -18,9 +19,9 @@ export class KolTree implements TreeProps {
 
 	public render(): JSX.Element {
 		return (
-			<kol-tree-wc _label={this._label}>
+			<KolTreeWc _label={this._label}>
 				<slot />
-			</kol-tree-wc>
+			</KolTreeWc>
 		);
 	}
 }
diff --git a/packages/components/src/components/version/component.tsx b/packages/components/src/components/version/component.tsx
index 998b64340c..f774786dd9 100644
--- a/packages/components/src/components/version/component.tsx
+++ b/packages/components/src/components/version/component.tsx
@@ -5,6 +5,7 @@ import { Component, h, Prop, State, Watch } from '@stencil/core';
 import { translate } from '../../i18n';
 
 import type { JSX } from '@stencil/core';
+import { KolBadge } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-version',
@@ -16,7 +17,7 @@ import type { JSX } from '@stencil/core';
 export class KolVersion implements VersionAPI {
 	public render(): JSX.Element {
 		return (
-			<kol-badge
+			<KolBadge
 				_color="#bec5c9"
 				_icons={{
 					left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
diff --git a/packages/components/src/components/version/readme.md b/packages/components/src/components/version/readme.md
index ffc83fc970..f552984cad 100644
--- a/packages/components/src/components/version/readme.md
+++ b/packages/components/src/components/version/readme.md
@@ -30,21 +30,4 @@ Die **Version** wird standardmäßig als **_Inline-Element_** ausgegeben.
 | --------------------- | --------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
 | `_label` _(required)_ | `_label`  | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string` | `undefined` |
 
-## Dependencies
-
-### Depends on
-
-- [kol-badge](../badge)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-version --> kol-badge
-  kol-badge --> kol-button-wc
-  kol-badge --> kol-span-wc
-  kol-span-wc --> kol-icon
-  style kol-version stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/core/component-names.ts b/packages/components/src/core/component-names.ts
index 56ef275943..9ae3e8781c 100644
--- a/packages/components/src/core/component-names.ts
+++ b/packages/components/src/core/component-names.ts
@@ -19,6 +19,7 @@ export let KolHeadingWc = 'kol-heading-wc';
 export let KolIcon = 'kol-icon';
 export let KolImage = 'kol-image';
 export let KolIndentedText = 'kol-indented-text';
+export let KolInput = 'kol-input';
 export let KolInputCheckbox = 'kol-input-checkbox';
 export let KolInputColor = 'kol-input-color';
 export let KolInputDate = 'kol-input-date';
@@ -31,6 +32,7 @@ export let KolInputRange = 'kol-input-range';
 export let KolInputText = 'kol-input-text';
 export let KolKolibri = 'kol-kolibri';
 export let KolLink = 'kol-link';
+export let KolLinkWc = 'kol-link-wc';
 export let KolLinkButton = 'kol-link-button';
 export let KolLinkGroup = 'kol-link-group';
 export let KolLogo = 'kol-logo';
@@ -79,6 +81,7 @@ export const setCustomTagNames = (transformTagName: (tagName: string) => string)
 	KolIcon = transformTagName(KolIcon);
 	KolImage = transformTagName(KolImage);
 	KolIndentedText = transformTagName(KolIndentedText);
+	KolInput = transformTagName(KolInput);
 	KolInputCheckbox = transformTagName(KolInputCheckbox);
 	KolInputColor = transformTagName(KolInputColor);
 	KolInputDate = transformTagName(KolInputDate);
@@ -91,6 +94,7 @@ export const setCustomTagNames = (transformTagName: (tagName: string) => string)
 	KolInputText = transformTagName(KolInputText);
 	KolKolibri = transformTagName(KolKolibri);
 	KolLink = transformTagName(KolLink);
+	KolLinkWc = transformTagName(KolLinkWc);
 	KolLinkButton = transformTagName(KolLinkButton);
 	KolLinkGroup = transformTagName(KolLinkGroup);
 	KolLogo = transformTagName(KolLogo);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 918190ba1d..de0244c9f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -533,8 +533,8 @@ importers:
         specifier: 2.0.8
         version: link:../schema
       adopted-style-sheets:
-        specifier: 1.1.3
-        version: 1.1.3
+        specifier: link:../../../a11y-ui/packages/adopted-style-sheets
+        version: link:../../../a11y-ui/packages/adopted-style-sheets
       i18next:
         specifier: 23.9.0
         version: 23.9.0
@@ -6296,7 +6296,7 @@ packages:
     peerDependencies:
       '@leanup/stack': ~1.3.0
     dependencies:
-      '@leanup/stack': 1.3.49(chromedriver@121.0.2)(esbuild@0.19.3)(typescript@5.2.2)
+      '@leanup/stack': 1.3.49(chromedriver@121.0.2)(esbuild@0.19.3)(typescript@5.3.3)
       '@swc/core': 1.3.101
       copy-modules-webpack-plugin: 2.2.1
       copy-webpack-plugin: 10.2.4(webpack@5.89.0)
@@ -6414,6 +6414,7 @@ packages:
       - geckodriver
       - supports-color
       - utf-8-validate
+    dev: true
 
   /@leanup/stack@1.3.49(chromedriver@121.0.2)(esbuild@0.19.3)(typescript@5.3.3):
     resolution: {integrity: sha512-NWGmqmk9oapxjDm8dcIuC/MCVHpYEvamCwrNw/XvumXhMZl1TFEwQ4xj97eXYo0mDCS47N98Po6xaTrCVpctTw==}
@@ -8350,6 +8351,7 @@ packages:
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /@typescript-eslint/eslint-plugin@6.15.0(@typescript-eslint/parser@6.15.0)(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-j5qoikQqPccq9QoBAupOP+CBu8BaJ8BLjaXSioDISeTZkVO3ig7oSIKh3H+rEpee7xCXtWwSB4KIL5l6hWZzpg==}
@@ -8456,6 +8458,7 @@ packages:
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /@typescript-eslint/parser@6.15.0(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-MkgKNnsjC6QwcMdlNAel24jjkEO/0hQaMDLqP4S9zq5HBAUJNQB6y+3DwLjX7b3l2b37eNAxMPLwb3/kh8VKdA==}
@@ -8552,6 +8555,7 @@ packages:
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /@typescript-eslint/type-utils@6.15.0(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-CnmHKTfX6450Bo49hPg2OkIm/D/TVYV7jO1MCfPYGwf6x3GO0VU8YMO5AYMn+u3X05lRRxA4fWCz87GFQV6yVQ==}
@@ -8640,6 +8644,7 @@ packages:
       typescript: 5.2.2
     transitivePeerDependencies:
       - supports-color
+    dev: true
 
   /@typescript-eslint/typescript-estree@6.15.0(typescript@5.3.3):
     resolution: {integrity: sha512-7mVZJN7Hd15OmGuWrp2T9UvqR2Ecg+1j/Bp1jXUEY2GZKV6FXlOIoqVDmLpBiEiq3katvj/2n2mR0SDwtloCew==}
@@ -8722,6 +8727,7 @@ packages:
     transitivePeerDependencies:
       - supports-color
       - typescript
+    dev: true
 
   /@typescript-eslint/utils@6.15.0(eslint@8.56.0)(typescript@5.3.3):
     resolution: {integrity: sha512-eF82p0Wrrlt8fQSRL0bGXzK5nWPRV2dYQZdajcfzOD9+cQz9O7ugifrJxclB+xVOvWvagXfqS4Es7vpLP4augw==}
@@ -22612,6 +22618,7 @@ packages:
       typescript: '>=4.2.0'
     dependencies:
       typescript: 5.2.2
+    dev: true
 
   /ts-api-utils@1.0.2(typescript@5.3.3):
     resolution: {integrity: sha512-Cbu4nIqnEdd+THNEsBdkolnOXhg0I8XteoHaEKgvsxpsbWda4IsUut2c187HxywQCvveojow0Dgw/amxtSKVkQ==}

From b7d720c3ec3db21e86f7d2401a2e165951c4ccb6 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Tue, 27 Feb 2024 14:32:56 +0100
Subject: [PATCH 12/24] Upgrade adopted-style-sheets

---
 packages/components/package.json |   2 +-
 pnpm-lock.yaml                   | 151 +++----------------------------
 2 files changed, 13 insertions(+), 140 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index acd117ac49..717307a637 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -69,7 +69,7 @@
 	"dependencies": {
 		"@floating-ui/dom": "1.6.3",
 		"@public-ui/schema": "2.0.8",
-		"adopted-style-sheets": "link:../../../a11y-ui/packages/adopted-style-sheets",
+		"adopted-style-sheets": "1.1.4-dev.1",
 		"i18next": "23.9.0",
 		"markdown-it": "14.0.0"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index de0244c9f2..5a1d21b772 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -533,8 +533,8 @@ importers:
         specifier: 2.0.8
         version: link:../schema
       adopted-style-sheets:
-        specifier: link:../../../a11y-ui/packages/adopted-style-sheets
-        version: link:../../../a11y-ui/packages/adopted-style-sheets
+        specifier: 1.1.4-dev.1
+        version: 1.1.4-dev.1
       i18next:
         specifier: 23.9.0
         version: 23.9.0
@@ -1407,7 +1407,7 @@ importers:
     devDependencies:
       '@leanup/stack':
         specifier: 1.3.49
-        version: 1.3.49(chromedriver@121.0.0)(esbuild@0.19.3)(typescript@5.3.3)
+        version: 1.3.49(chromedriver@121.0.2)(esbuild@0.19.3)(typescript@5.3.3)
       '@playwright/experimental-ct-react':
         specifier: 1.41.2
         version: 1.41.2(@types/node@20.11.19)(vite@5.1.3)
@@ -1732,7 +1732,7 @@ importers:
         version: link:../../samples/react
       axe-playwright:
         specifier: 2.0.1
-        version: 2.0.1(playwright@1.39.0)
+        version: 2.0.1(playwright@1.41.2)
       portfinder:
         specifier: 1.0.32
         version: 1.0.32
@@ -6330,49 +6330,6 @@ packages:
       - utf-8-validate
       - webpack-bundle-analyzer
 
-  /@leanup/stack@1.3.49(chromedriver@121.0.0)(esbuild@0.19.3)(typescript@5.3.3):
-    resolution: {integrity: sha512-NWGmqmk9oapxjDm8dcIuC/MCVHpYEvamCwrNw/XvumXhMZl1TFEwQ4xj97eXYo0mDCS47N98Po6xaTrCVpctTw==}
-    peerDependencies:
-      chromedriver: '*'
-      esbuild: ^0
-      typescript: ^5 || ^4
-    dependencies:
-      '@types/chai': 4.3.11
-      '@types/mocha': 9.1.1
-      '@types/nightwatch': 1.3.4
-      '@types/sinon': 10.0.20
-      '@typescript-eslint/eslint-plugin': 6.15.0(@typescript-eslint/parser@6.15.0)(eslint@8.56.0)(typescript@5.3.3)
-      '@typescript-eslint/parser': 6.15.0(eslint@8.56.0)(typescript@5.3.3)
-      chai: 4.3.10
-      chromedriver: 121.0.0
-      cross-env: 7.0.3
-      esbuild: 0.19.3
-      esbuild-register: 3.5.0(esbuild@0.19.3)
-      eslint: 8.56.0
-      eslint-plugin-html: 7.1.0
-      eslint-plugin-json: 3.1.0
-      jsdom: 22.1.0
-      jsdom-global: 3.0.2(jsdom@22.1.0)
-      less: 4.2.0
-      mocha: 9.2.2
-      mock-local-storage: 1.1.24
-      nightwatch: 2.6.24(chromedriver@121.0.0)
-      nyc: 15.1.0
-      postcss: 8.4.32
-      prettier: 2.8.8
-      sass: 1.69.5
-      sinon: 13.0.2
-      tslib: 2.6.2
-      typescript: 5.3.3
-    transitivePeerDependencies:
-      - '@cucumber/cucumber'
-      - bufferutil
-      - canvas
-      - geckodriver
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /@leanup/stack@1.3.49(chromedriver@121.0.2)(esbuild@0.19.3)(typescript@5.2.2):
     resolution: {integrity: sha512-NWGmqmk9oapxjDm8dcIuC/MCVHpYEvamCwrNw/XvumXhMZl1TFEwQ4xj97eXYo0mDCS47N98Po6xaTrCVpctTw==}
     peerDependencies:
@@ -9429,6 +9386,12 @@ packages:
     dependencies:
       loglevel: 1.8.1
 
+  /adopted-style-sheets@1.1.4-dev.1:
+    resolution: {integrity: sha512-TQmsZ10riuNyz3rPwVzNrRaNVWO5Gim904cU2wgXMfAWxiwfvv4FkPWTuiYZ0Zf2phFj3ZVqYe6T463Oy4bxiw==}
+    dependencies:
+      loglevel: 1.9.1
+    dev: false
+
   /agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -9960,7 +9923,7 @@ packages:
       rimraf: 3.0.2
     dev: false
 
-  /axe-playwright@2.0.1(playwright@1.39.0):
+  /axe-playwright@2.0.1(playwright@1.41.2):
     resolution: {integrity: sha512-MHjNjGARulF9XzqSfspmNjw+tpBz4x9o1VlTuLWEUW9fqzhn+xWa1qEpuOIQPbsRWQiLfooDjQAunLeE0PM5AQ==}
     peerDependencies:
       playwright: '>1.0.0'
@@ -9970,7 +9933,7 @@ packages:
       axe-html-reporter: 2.2.3(axe-core@4.8.3)
       junit-report-builder: 3.1.0
       picocolors: 1.0.0
-      playwright: 1.39.0
+      playwright: 1.41.2
     dev: false
 
   /axios@1.6.5:
@@ -10705,24 +10668,6 @@ packages:
     resolution: {integrity: sha512-p3KULyQg4S7NIHixdwbGX+nFHkoBiA4YQmyWtjb8XngSKV124nJmRysgAeujbUVb15vh+RvFUfCPqU7rXk+hZg==}
     engines: {node: '>=6.0'}
 
-  /chromedriver@121.0.0:
-    resolution: {integrity: sha512-ZIKEdZrQAfuzT/RRofjl8/EZR99ghbdBXNTOcgJMKGP6N/UL6lHUX4n6ONWBV18pDvDFfQJ0x58h5AdOaXIOMw==}
-    engines: {node: '>=18'}
-    hasBin: true
-    requiresBuild: true
-    dependencies:
-      '@testim/chrome-version': 1.1.4
-      axios: 1.6.5
-      compare-versions: 6.1.0
-      extract-zip: 2.0.1
-      https-proxy-agent: 5.0.1
-      proxy-from-env: 1.1.0
-      tcp-port-used: 1.0.2
-    transitivePeerDependencies:
-      - debug
-      - supports-color
-    dev: true
-
   /chromedriver@121.0.2:
     resolution: {integrity: sha512-58MUSCEE3oB3G3Y/Jo3URJ2Oa1VLHcVBufyYt7vNfGrABSJm7ienQLF9IQ8LPDlPVgLUXt2OBfggK3p2/SlEBg==}
     engines: {node: '>=18'}
@@ -17839,62 +17784,6 @@ packages:
     dependencies:
       axe-core: 4.8.3
 
-  /nightwatch@2.6.24(chromedriver@121.0.0):
-    resolution: {integrity: sha512-XRLlmZLWv/a35ZZ0Ev1FVizqx+d5K4aDv/vV1++I1JJzyBu/vftx4ALKCrR0nmNqqQfBBO+p/h10r+ayyU9TRw==}
-    engines: {node: '>= 12.0.0'}
-    hasBin: true
-    peerDependencies:
-      '@cucumber/cucumber': '*'
-      chromedriver: '*'
-      geckodriver: '*'
-    peerDependenciesMeta:
-      '@cucumber/cucumber':
-        optional: true
-      chromedriver:
-        optional: true
-      geckodriver:
-        optional: true
-    dependencies:
-      '@nightwatch/chai': 5.0.2
-      '@nightwatch/html-reporter-template': 0.2.1
-      ansi-to-html: 0.7.2
-      assertion-error: 1.1.0
-      boxen: 5.1.2
-      chai-nightwatch: 0.5.3
-      chromedriver: 121.0.0
-      ci-info: 3.3.0
-      cli-table3: 0.6.3
-      didyoumean: 1.2.2
-      dotenv: 10.0.0
-      ejs: 3.1.8
-      envinfo: 7.8.1
-      fs-extra: 10.1.0
-      glob: 7.2.3
-      jsdom: 19.0.0
-      lodash.clone: 3.0.3
-      lodash.defaultsdeep: 4.6.1
-      lodash.escape: 4.0.1
-      lodash.merge: 4.6.2
-      lodash.pick: 4.4.0
-      minimatch: 3.1.2
-      minimist: 1.2.6
-      mocha: 9.2.2
-      nightwatch-axe-verbose: 2.3.0
-      open: 8.4.0
-      ora: 5.4.1
-      selenium-webdriver: 4.6.1
-      semver: 7.3.5
-      stacktrace-parser: 0.1.10
-      strip-ansi: 6.0.1
-      untildify: 4.0.0
-      uuid: 8.3.2
-    transitivePeerDependencies:
-      - bufferutil
-      - canvas
-      - supports-color
-      - utf-8-validate
-    dev: true
-
   /nightwatch@2.6.24(chromedriver@121.0.2):
     resolution: {integrity: sha512-XRLlmZLWv/a35ZZ0Ev1FVizqx+d5K4aDv/vV1++I1JJzyBu/vftx4ALKCrR0nmNqqQfBBO+p/h10r+ayyU9TRw==}
     engines: {node: '>= 12.0.0'}
@@ -19223,27 +19112,11 @@ packages:
     dependencies:
       find-up: 3.0.0
 
-  /playwright-core@1.39.0:
-    resolution: {integrity: sha512-+k4pdZgs1qiM+OUkSjx96YiKsXsmb59evFoqv8SKO067qBA+Z2s/dCzJij/ZhdQcs2zlTAgRKfeiiLm8PQ2qvw==}
-    engines: {node: '>=16'}
-    hasBin: true
-    dev: false
-
   /playwright-core@1.41.2:
     resolution: {integrity: sha512-VaTvwCA4Y8kxEe+kfm2+uUUw5Lubf38RxF7FpBxLPmGe5sdNkSg5e3ChEigaGrX7qdqT3pt2m/98LiyvU2x6CA==}
     engines: {node: '>=16'}
     hasBin: true
 
-  /playwright@1.39.0:
-    resolution: {integrity: sha512-naE5QT11uC/Oiq0BwZ50gDmy8c8WLPRTEWuSSFVG2egBka/1qMoSqYQcROMT9zLwJ86oPofcTH2jBY/5wWOgIw==}
-    engines: {node: '>=16'}
-    hasBin: true
-    dependencies:
-      playwright-core: 1.39.0
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: false
-
   /playwright@1.41.2:
     resolution: {integrity: sha512-v0bOa6H2GJChDL8pAeLa/LZC4feoAMbSQm1/jF/ySsWWoaNItvrMP7GEkvEEFyCTUYKMxjQKaTSg5up7nR6/8A==}
     engines: {node: '>=16'}

From 104ff8a13877e5914f6476011639f1ee4222846c Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Tue, 27 Feb 2024 15:02:10 +0100
Subject: [PATCH 13/24] Add missing transformTagName calls

---
 packages/components/src/core/component-names.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/core/component-names.ts b/packages/components/src/core/component-names.ts
index 9ae3e8781c..4e3b014049 100644
--- a/packages/components/src/core/component-names.ts
+++ b/packages/components/src/core/component-names.ts
@@ -70,6 +70,7 @@ export const setCustomTagNames = (transformTagName: (tagName: string) => string)
 	KolBadge = transformTagName(KolBadge);
 	KolBreadcrumb = transformTagName(KolBreadcrumb);
 	KolButton = transformTagName(KolButton);
+	KolButtonWc = transformTagName(KolButtonWc);
 	KolButtonGroup = transformTagName(KolButtonGroup);
 	KolButtonGroupWc = transformTagName(KolButtonGroupWc);
 	KolButtonLink = transformTagName(KolButtonLink);
@@ -107,6 +108,7 @@ export const setCustomTagNames = (transformTagName: (tagName: string) => string)
 	KolSelect = transformTagName(KolSelect);
 	KolSkipNav = transformTagName(KolSkipNav);
 	KolSpan = transformTagName(KolSpan);
+	KolSpanWc = transformTagName(KolSpanWc);
 	KolSpin = transformTagName(KolSpin);
 	KolSplitButton = transformTagName(KolSplitButton);
 	KolSymbol = transformTagName(KolSymbol);

From afdb99a577eaae5a8d377465f5a7fa841d19c37c Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Thu, 29 Feb 2024 09:58:56 +0100
Subject: [PATCH 14/24] Type component-names

---
 .../src/components/form/component.tsx         |   2 +-
 .../src/components/tree-item/component.tsx    |   2 +-
 .../components/src/core/component-names.ts    | 244 +++++++++---------
 3 files changed, 124 insertions(+), 124 deletions(-)

diff --git a/packages/components/src/components/form/component.tsx b/packages/components/src/components/form/component.tsx
index 56f477e017..014a87377b 100644
--- a/packages/components/src/components/form/component.tsx
+++ b/packages/components/src/components/form/component.tsx
@@ -58,7 +58,7 @@ export class KolForm implements FormAPI {
 											_href={error.selector}
 											_label={error.message}
 											_on={{ onClick: this.handleLinkClick }}
-											ref={(el: HTMLElement) => {
+											ref={(el?: HTMLKolLinkElement) => {
 												if (index === 0) this.errorListElement = el;
 											}}
 										/>
diff --git a/packages/components/src/components/tree-item/component.tsx b/packages/components/src/components/tree-item/component.tsx
index 85ac773883..31a4b268b6 100644
--- a/packages/components/src/components/tree-item/component.tsx
+++ b/packages/components/src/components/tree-item/component.tsx
@@ -24,7 +24,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 						}}
 						_label=""
 						_href={this.state._href}
-						ref={(element: HTMLKolLinkWcElement) => (this.linkElement = element!)}
+						ref={(element?: HTMLKolLinkWcElement) => (this.linkElement = element!)}
 						_tabIndex={this.state._active ? 0 : -1}
 					>
 						<span slot="expert">
diff --git a/packages/components/src/core/component-names.ts b/packages/components/src/core/component-names.ts
index 4e3b014049..28fe6bea43 100644
--- a/packages/components/src/core/component-names.ts
+++ b/packages/components/src/core/component-names.ts
@@ -1,125 +1,125 @@
-export let KolAbbr = 'kol-abbr';
-export let KolAccordion = 'kol-accordion';
-export let KolAlert = 'kol-alert';
-export let KolAlertWc = 'kol-alert-wc';
-export let KolAvatar = 'kol-avatar';
-export let KolAvatarWc = 'kol-avatar-wc';
-export let KolBadge = 'kol-badge';
-export let KolBreadcrumb = 'kol-breadcrumb';
-export let KolButton = 'kol-button';
-export let KolButtonWc = 'kol-button-wc';
-export let KolButtonGroup = 'kol-button-group';
-export let KolButtonGroupWc = 'kol-button-group-wc';
-export let KolButtonLink = 'kol-button-link';
-export let KolCard = 'kol-card';
-export let KolDetails = 'kol-details';
-export let KolForm = 'kol-form';
-export let KolHeading = 'kol-heading';
-export let KolHeadingWc = 'kol-heading-wc';
-export let KolIcon = 'kol-icon';
-export let KolImage = 'kol-image';
-export let KolIndentedText = 'kol-indented-text';
-export let KolInput = 'kol-input';
-export let KolInputCheckbox = 'kol-input-checkbox';
-export let KolInputColor = 'kol-input-color';
-export let KolInputDate = 'kol-input-date';
-export let KolInputEmail = 'kol-input-email';
-export let KolInputFile = 'kol-input-file';
-export let KolInputNumber = 'kol-input-number';
-export let KolInputPassword = 'kol-input-password';
-export let KolInputRadio = 'kol-input-radio';
-export let KolInputRange = 'kol-input-range';
-export let KolInputText = 'kol-input-text';
-export let KolKolibri = 'kol-kolibri';
-export let KolLink = 'kol-link';
-export let KolLinkWc = 'kol-link-wc';
-export let KolLinkButton = 'kol-link-button';
-export let KolLinkGroup = 'kol-link-group';
-export let KolLogo = 'kol-logo';
-export let KolModal = 'kol-modal';
-export let KolNav = 'kol-nav';
-export let KolPagination = 'kol-pagination';
-export let KolPopoverWc = 'kol-popover-wc';
-export let KolProgress = 'kol-progress';
-export let KolQuote = 'kol-quote';
-export let KolSelect = 'kol-select';
-export let KolSkipNav = 'kol-skip-nav';
-export let KolSpan = 'kol-span';
-export let KolSpanWc = 'kol-span-wc';
-export let KolSpin = 'kol-spin';
-export let KolSplitButton = 'kol-split-button';
-export let KolSymbol = 'kol-symbol';
-export let KolTable = 'kol-table';
-export let KolTabs = 'kol-tabs';
-export let KolTextarea = 'kol-textarea';
-export let KolToastContainer = 'kol-toast-container';
-export let KolTooltipWc = 'kol-tooltip-wc';
-export let KolTree = 'kol-tree';
-export let KolTreeItem = 'kol-tree-item';
-export let KolTreeItemWc = 'kol-tree-item-wc';
-export let KolTreeWc = 'kol-tree-wc';
-export let KolVersion = 'kol-version';
+export let KolAbbr = 'kol-abbr' as const;
+export let KolAccordion = 'kol-accordion' as const;
+export let KolAlert = 'kol-alert' as const;
+export let KolAlertWc = 'kol-alert-wc' as const;
+export let KolAvatar = 'kol-avatar' as const;
+export let KolAvatarWc = 'kol-avatar-wc' as const;
+export let KolBadge = 'kol-badge' as const;
+export let KolBreadcrumb = 'kol-breadcrumb' as const;
+export let KolButton = 'kol-button' as const;
+export let KolButtonWc = 'kol-button-wc' as const;
+export let KolButtonGroup = 'kol-button-group' as const;
+export let KolButtonGroupWc = 'kol-button-group-wc' as const;
+export let KolButtonLink = 'kol-button-link' as const;
+export let KolCard = 'kol-card' as const;
+export let KolDetails = 'kol-details' as const;
+export let KolForm = 'kol-form' as const;
+export let KolHeading = 'kol-heading' as const;
+export let KolHeadingWc = 'kol-heading-wc' as const;
+export let KolIcon = 'kol-icon' as const;
+export let KolImage = 'kol-image' as const;
+export let KolIndentedText = 'kol-indented-text' as const;
+export let KolInput = 'kol-input' as const;
+export let KolInputCheckbox = 'kol-input-checkbox' as const;
+export let KolInputColor = 'kol-input-color' as const;
+export let KolInputDate = 'kol-input-date' as const;
+export let KolInputEmail = 'kol-input-email' as const;
+export let KolInputFile = 'kol-input-file' as const;
+export let KolInputNumber = 'kol-input-number' as const;
+export let KolInputPassword = 'kol-input-password' as const;
+export let KolInputRadio = 'kol-input-radio' as const;
+export let KolInputRange = 'kol-input-range' as const;
+export let KolInputText = 'kol-input-text' as const;
+export let KolKolibri = 'kol-kolibri' as const;
+export let KolLink = 'kol-link' as const;
+export let KolLinkWc = 'kol-link-wc' as const;
+export let KolLinkButton = 'kol-link-button' as const;
+export let KolLinkGroup = 'kol-link-group' as const;
+export let KolLogo = 'kol-logo' as const;
+export let KolModal = 'kol-modal' as const;
+export let KolNav = 'kol-nav' as const;
+export let KolPagination = 'kol-pagination' as const;
+export let KolPopoverWc = 'kol-popover-wc' as const;
+export let KolProgress = 'kol-progress' as const;
+export let KolQuote = 'kol-quote' as const;
+export let KolSelect = 'kol-select' as const;
+export let KolSkipNav = 'kol-skip-nav' as const;
+export let KolSpan = 'kol-span' as const;
+export let KolSpanWc = 'kol-span-wc' as const;
+export let KolSpin = 'kol-spin' as const;
+export let KolSplitButton = 'kol-split-button' as const;
+export let KolSymbol = 'kol-symbol' as const;
+export let KolTable = 'kol-table' as const;
+export let KolTabs = 'kol-tabs' as const;
+export let KolTextarea = 'kol-textarea' as const;
+export let KolToastContainer = 'kol-toast-container' as const;
+export let KolTooltipWc = 'kol-tooltip-wc' as const;
+export let KolTree = 'kol-tree' as const;
+export let KolTreeItem = 'kol-tree-item' as const;
+export let KolTreeItemWc = 'kol-tree-item-wc' as const;
+export let KolTreeWc = 'kol-tree-wc' as const;
+export let KolVersion = 'kol-version' as const;
 
 export const setCustomTagNames = (transformTagName: (tagName: string) => string) => {
-	KolAbbr = transformTagName(KolAbbr);
-	KolAccordion = transformTagName(KolAccordion);
-	KolAlert = transformTagName(KolAlert);
-	KolAlertWc = transformTagName(KolAlertWc);
-	KolAvatar = transformTagName(KolAvatar);
-	KolAvatarWc = transformTagName(KolAvatarWc);
-	KolBadge = transformTagName(KolBadge);
-	KolBreadcrumb = transformTagName(KolBreadcrumb);
-	KolButton = transformTagName(KolButton);
-	KolButtonWc = transformTagName(KolButtonWc);
-	KolButtonGroup = transformTagName(KolButtonGroup);
-	KolButtonGroupWc = transformTagName(KolButtonGroupWc);
-	KolButtonLink = transformTagName(KolButtonLink);
-	KolCard = transformTagName(KolCard);
-	KolDetails = transformTagName(KolDetails);
-	KolForm = transformTagName(KolForm);
-	KolHeading = transformTagName(KolHeading);
-	KolHeadingWc = transformTagName(KolHeadingWc);
-	KolIcon = transformTagName(KolIcon);
-	KolImage = transformTagName(KolImage);
-	KolIndentedText = transformTagName(KolIndentedText);
-	KolInput = transformTagName(KolInput);
-	KolInputCheckbox = transformTagName(KolInputCheckbox);
-	KolInputColor = transformTagName(KolInputColor);
-	KolInputDate = transformTagName(KolInputDate);
-	KolInputEmail = transformTagName(KolInputEmail);
-	KolInputFile = transformTagName(KolInputFile);
-	KolInputNumber = transformTagName(KolInputNumber);
-	KolInputPassword = transformTagName(KolInputPassword);
-	KolInputRadio = transformTagName(KolInputRadio);
-	KolInputRange = transformTagName(KolInputRange);
-	KolInputText = transformTagName(KolInputText);
-	KolKolibri = transformTagName(KolKolibri);
-	KolLink = transformTagName(KolLink);
-	KolLinkWc = transformTagName(KolLinkWc);
-	KolLinkButton = transformTagName(KolLinkButton);
-	KolLinkGroup = transformTagName(KolLinkGroup);
-	KolLogo = transformTagName(KolLogo);
-	KolModal = transformTagName(KolModal);
-	KolNav = transformTagName(KolNav);
-	KolPagination = transformTagName(KolPagination);
-	KolPopoverWc = transformTagName(KolPopoverWc);
-	KolProgress = transformTagName(KolProgress);
-	KolQuote = transformTagName(KolQuote);
-	KolSelect = transformTagName(KolSelect);
-	KolSkipNav = transformTagName(KolSkipNav);
-	KolSpan = transformTagName(KolSpan);
-	KolSpanWc = transformTagName(KolSpanWc);
-	KolSpin = transformTagName(KolSpin);
-	KolSplitButton = transformTagName(KolSplitButton);
-	KolSymbol = transformTagName(KolSymbol);
-	KolTable = transformTagName(KolTable);
-	KolTabs = transformTagName(KolTabs);
-	KolTextarea = transformTagName(KolTextarea);
-	KolToastContainer = transformTagName(KolToastContainer);
-	KolTooltipWc = transformTagName(KolTooltipWc);
-	KolTree = transformTagName(KolTree);
-	KolTreeItem = transformTagName(KolTreeItem);
-	KolTreeItemWc = transformTagName(KolTreeItemWc);
-	KolTreeWc = transformTagName(KolTreeWc);
-	KolVersion = transformTagName(KolVersion);
+	KolAbbr = transformTagName(KolAbbr as string) as 'kol-abbr';
+	KolAccordion = transformTagName(KolAccordion as string) as 'kol-accordion';
+	KolAlert = transformTagName(KolAlert as string) as 'kol-alert';
+	KolAlertWc = transformTagName(KolAlertWc as string) as 'kol-alert-wc';
+	KolAvatar = transformTagName(KolAvatar as string) as 'kol-avatar';
+	KolAvatarWc = transformTagName(KolAvatarWc as string) as 'kol-avatar-wc';
+	KolBadge = transformTagName(KolBadge as string) as 'kol-badge';
+	KolBreadcrumb = transformTagName(KolBreadcrumb as string) as 'kol-breadcrumb';
+	KolButton = transformTagName(KolButton as string) as 'kol-button';
+	KolButtonWc = transformTagName(KolButtonWc as string) as 'kol-button-wc';
+	KolButtonGroup = transformTagName(KolButtonGroup as string) as 'kol-button-group';
+	KolButtonGroupWc = transformTagName(KolButtonGroupWc as string) as 'kol-button-group-wc';
+	KolButtonLink = transformTagName(KolButtonLink as string) as 'kol-button-link';
+	KolCard = transformTagName(KolCard as string) as 'kol-card';
+	KolDetails = transformTagName(KolDetails as string) as 'kol-details';
+	KolForm = transformTagName(KolForm as string) as 'kol-form';
+	KolHeading = transformTagName(KolHeading as string) as 'kol-heading';
+	KolHeadingWc = transformTagName(KolHeadingWc as string) as 'kol-heading-wc';
+	KolIcon = transformTagName(KolIcon as string) as 'kol-icon';
+	KolImage = transformTagName(KolImage as string) as 'kol-image';
+	KolIndentedText = transformTagName(KolIndentedText as string) as 'kol-indented-text';
+	KolInput = transformTagName(KolInput as string) as 'kol-input';
+	KolInputCheckbox = transformTagName(KolInputCheckbox as string) as 'kol-input-checkbox';
+	KolInputColor = transformTagName(KolInputColor as string) as 'kol-input-color';
+	KolInputDate = transformTagName(KolInputDate as string) as 'kol-input-date';
+	KolInputEmail = transformTagName(KolInputEmail as string) as 'kol-input-email';
+	KolInputFile = transformTagName(KolInputFile as string) as 'kol-input-file';
+	KolInputNumber = transformTagName(KolInputNumber as string) as 'kol-input-number';
+	KolInputPassword = transformTagName(KolInputPassword as string) as 'kol-input-password';
+	KolInputRadio = transformTagName(KolInputRadio as string) as 'kol-input-radio';
+	KolInputRange = transformTagName(KolInputRange as string) as 'kol-input-range';
+	KolInputText = transformTagName(KolInputText as string) as 'kol-input-text';
+	KolKolibri = transformTagName(KolKolibri as string) as 'kol-kolibri';
+	KolLink = transformTagName(KolLink as string) as 'kol-link';
+	KolLinkWc = transformTagName(KolLinkWc as string) as 'kol-link-wc';
+	KolLinkButton = transformTagName(KolLinkButton as string) as 'kol-link-button';
+	KolLinkGroup = transformTagName(KolLinkGroup as string) as 'kol-link-group';
+	KolLogo = transformTagName(KolLogo as string) as 'kol-logo';
+	KolModal = transformTagName(KolModal as string) as 'kol-modal';
+	KolNav = transformTagName(KolNav as string) as 'kol-nav';
+	KolPagination = transformTagName(KolPagination as string) as 'kol-pagination';
+	KolPopoverWc = transformTagName(KolPopoverWc as string) as 'kol-popover-wc';
+	KolProgress = transformTagName(KolProgress as string) as 'kol-progress';
+	KolQuote = transformTagName(KolQuote as string) as 'kol-quote';
+	KolSelect = transformTagName(KolSelect as string) as 'kol-select';
+	KolSkipNav = transformTagName(KolSkipNav as string) as 'kol-skip-nav';
+	KolSpan = transformTagName(KolSpan as string) as 'kol-span';
+	KolSpanWc = transformTagName(KolSpanWc as string) as 'kol-span-wc';
+	KolSpin = transformTagName(KolSpin as string) as 'kol-spin';
+	KolSplitButton = transformTagName(KolSplitButton as string) as 'kol-split-button';
+	KolSymbol = transformTagName(KolSymbol as string) as 'kol-symbol';
+	KolTable = transformTagName(KolTable as string) as 'kol-table';
+	KolTabs = transformTagName(KolTabs as string) as 'kol-tabs';
+	KolTextarea = transformTagName(KolTextarea as string) as 'kol-textarea';
+	KolToastContainer = transformTagName(KolToastContainer as string) as 'kol-toast-container';
+	KolTooltipWc = transformTagName(KolTooltipWc as string) as 'kol-tooltip-wc';
+	KolTree = transformTagName(KolTree as string) as 'kol-tree';
+	KolTreeItem = transformTagName(KolTreeItem as string) as 'kol-tree-item';
+	KolTreeItemWc = transformTagName(KolTreeItemWc as string) as 'kol-tree-item-wc';
+	KolTreeWc = transformTagName(KolTreeWc as string) as 'kol-tree-wc';
+	KolVersion = transformTagName(KolVersion as string) as 'kol-version';
 };

From ea242c3e2aeade6d74630731052f0b2746e5dda2 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Thu, 29 Feb 2024 10:10:11 +0100
Subject: [PATCH 15/24] Refactor tag name constants

---
 .../src/components/abbr/component.tsx         |   4 +-
 .../src/components/accordion/component.tsx    |  10 +-
 .../src/components/alert/component.tsx        |  10 +-
 .../src/components/alert/shadow.tsx           |   6 +-
 .../src/components/avatar/shadow.tsx          |   4 +-
 .../src/components/badge/component.tsx        |   6 +-
 .../src/components/breadcrumb/component.tsx   |   8 +-
 .../src/components/button-group/shadow.tsx    |   6 +-
 .../src/components/button-link/component.tsx  |   6 +-
 .../src/components/button/component.tsx       |  10 +-
 .../src/components/button/shadow.tsx          |   6 +-
 .../src/components/card/component.tsx         |   8 +-
 .../src/components/details/component.tsx      |   8 +-
 .../src/components/form/component.tsx         |  12 +-
 .../src/components/heading/shadow.tsx         |   6 +-
 .../components/input-checkbox/component.tsx   |   8 +-
 .../src/components/input-color/component.tsx  |   6 +-
 .../src/components/input-date/component.tsx   |   6 +-
 .../src/components/input-email/component.tsx  |   6 +-
 .../src/components/input-file/component.tsx   |   6 +-
 .../src/components/input-number/component.tsx |   6 +-
 .../components/input-password/component.tsx   |   6 +-
 .../src/components/input-radio/component.tsx  |   6 +-
 .../src/components/input-range/component.tsx  |   6 +-
 .../src/components/input-text/component.tsx   |   6 +-
 .../src/components/input/component.tsx        |  14 +-
 .../src/components/link-button/component.tsx  |   6 +-
 .../src/components/link-group/component.tsx   |   4 +-
 .../src/components/link/component.tsx         |  12 +-
 .../components/src/components/link/shadow.tsx |   6 +-
 .../src/components/nav/component.tsx          |  14 +-
 .../src/components/pagination/component.tsx   |  30 +--
 .../src/components/quote/shadow.tsx           |   4 +-
 .../src/components/select/component.tsx       |   6 +-
 .../src/components/skip-nav/component.tsx     |   4 +-
 .../src/components/span/component.tsx         |  15 +-
 .../components/src/components/span/shadow.tsx |   6 +-
 .../src/components/split-button/component.tsx |  10 +-
 .../src/components/table/component.tsx        |  14 +-
 .../src/components/tabs/component.tsx         |  14 +-
 .../src/components/textarea/component.tsx     |   6 +-
 .../src/components/toaster/component.tsx      |   6 +-
 .../src/components/tooltip/component.tsx      |   4 +-
 .../src/components/tree-item/component.tsx    |   6 +-
 .../src/components/tree-item/shadow.tsx       |   6 +-
 .../components/src/components/tree/shadow.tsx |   6 +-
 .../src/components/version/component.tsx      |   4 +-
 .../components/src/core/component-names.ts    | 244 +++++++++---------
 48 files changed, 309 insertions(+), 304 deletions(-)

diff --git a/packages/components/src/components/abbr/component.tsx b/packages/components/src/components/abbr/component.tsx
index 242840cc4e..6834ce95d6 100644
--- a/packages/components/src/components/abbr/component.tsx
+++ b/packages/components/src/components/abbr/component.tsx
@@ -3,7 +3,7 @@ import { validateLabel, validateTooltipAlign } from '@public-ui/schema';
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
-import { KolTooltipWc } from '../../core/component-names';
+import { KolTooltipWcTag } from '../../core/component-names';
 
 import type { AbbrAPI, AbbrStates, LabelPropType, TooltipAlignPropType } from '@public-ui/schema';
 
@@ -29,7 +29,7 @@ export class KolAbbr implements AbbrAPI {
 						<slot />
 					</span>
 				</abbr>
-				<KolTooltipWc _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></KolTooltipWc>
+				<KolTooltipWcTag _align={this.state._tooltipAlign} _id={this.nonce} _label={this.state._label}></KolTooltipWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/accordion/component.tsx b/packages/components/src/components/accordion/component.tsx
index 328e3fdfd5..657995e83d 100644
--- a/packages/components/src/components/accordion/component.tsx
+++ b/packages/components/src/components/accordion/component.tsx
@@ -6,7 +6,7 @@ import { Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 
 import { nonce } from '../../utils/dev.utils';
 import { watchHeadingLevel } from '../heading/validation';
-import { KolHeadingWc, KolButtonWc } from '../../core/component-names';
+import { KolHeadingWcTag, KolButtonWcTag } from '../../core/component-names';
 
 import type { AccordionAPI, AccordionStates, DisabledPropType, HeadingLevel, KoliBriAccordionCallbacks, LabelPropType, OpenPropType } from '@public-ui/schema';
 featureHint(`[KolAccordion] Anfrage nach einer KolAccordionGroup bei dem immer nur ein Accordion geöffnet ist.
@@ -45,8 +45,8 @@ export class KolAccordion implements AccordionAPI {
 						open: this.state._open === true,
 					}}
 				>
-					<KolHeadingWc _label="" _level={this.state._level} class="accordion-heading">
-						<KolButtonWc
+					<KolHeadingWcTag _label="" _level={this.state._level} class="accordion-heading">
+						<KolButtonWcTag
 							class="accordion-button"
 							ref={this.catchRef}
 							slot="expert"
@@ -56,8 +56,8 @@ export class KolAccordion implements AccordionAPI {
 							_icons={this.state._open ? 'codicon codicon-remove' : 'codicon codicon-add'}
 							_label={this.state._label}
 							_on={{ onClick: this.onClick }}
-						></KolButtonWc>
-					</KolHeadingWc>
+						></KolButtonWcTag>
+					</KolHeadingWcTag>
 					<div class="wrapper">
 						<div class="animation-wrapper">
 							<div aria-hidden={this.state._open === false ? 'true' : undefined} class="content" id={this.nonce}>
diff --git a/packages/components/src/components/alert/component.tsx b/packages/components/src/components/alert/component.tsx
index 11928682be..e3516473fe 100644
--- a/packages/components/src/components/alert/component.tsx
+++ b/packages/components/src/components/alert/component.tsx
@@ -4,7 +4,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { translate } from '../../i18n';
 import { watchHeadingLevel } from '../heading/validation';
-import { KolIcon, KolHeadingWc, KolButtonWc } from '../../core/component-names';
+import { KolIconTag, KolHeadingWcTag, KolButtonWcTag } from '../../core/component-names';
 
 import type {
 	AlertAPI,
@@ -17,7 +17,7 @@ import type {
 	LabelPropType,
 } from '@public-ui/schema';
 const Icon = (props: { ariaLabel: string; icon: string; label?: string }) => {
-	return <KolIcon class="heading-icon" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;
+	return <KolIconTag class="heading-icon" _label={typeof props.label === 'string' && props.label.length > 0 ? '' : props.ariaLabel} _icons={props.icon} />;
 };
 
 const AlertIcon = (props: { label?: string; type?: AlertType }) => {
@@ -84,7 +84,7 @@ export class KolAlertWc implements AlertAPI {
 					<AlertIcon label={this.state._label} type={this.state._type} />
 					<div class="heading-content">
 						{typeof this.state._label === 'string' && this.state._label?.length > 0 && (
-							<KolHeadingWc _label={this.state._label} _level={this.state._level}></KolHeadingWc>
+							<KolHeadingWcTag _label={this.state._label} _level={this.state._level}></KolHeadingWcTag>
 						)}
 						{this.state._variant === 'msg' && (
 							<div class="content">
@@ -93,7 +93,7 @@ export class KolAlertWc implements AlertAPI {
 						)}
 					</div>
 					{this.state._hasCloser && (
-						<KolButtonWc
+						<KolButtonWcTag
 							class="close"
 							_hideLabel
 							_icons={{
@@ -104,7 +104,7 @@ export class KolAlertWc implements AlertAPI {
 							_label={translate('kol-close')}
 							_on={this.on}
 							_tooltipAlign="left"
-						></KolButtonWc>
+						></KolButtonWcTag>
 					)}
 				</div>
 				{this.state._variant === 'card' && (
diff --git a/packages/components/src/components/alert/shadow.tsx b/packages/components/src/components/alert/shadow.tsx
index 5e9136a557..bdaf50265a 100644
--- a/packages/components/src/components/alert/shadow.tsx
+++ b/packages/components/src/components/alert/shadow.tsx
@@ -1,7 +1,7 @@
 import type { AlertProps, AlertStates, AlertType, AlertVariant, HeadingLevel, KoliBriAlertEventCallbacks, LabelPropType } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Host, Prop, State } from '@stencil/core';
-import { KolAlertWc } from '../../core/component-names';
+import { KolAlertWcTag } from '../../core/component-names';
 
 /**
  * @slot - Der Inhalt der Meldung.
@@ -17,7 +17,7 @@ export class KolAlert implements AlertProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<KolAlertWc
+				<KolAlertWcTag
 					_alert={this._alert}
 					_hasCloser={this._hasCloser}
 					_label={this._label}
@@ -27,7 +27,7 @@ export class KolAlert implements AlertProps {
 					_variant={this._variant}
 				>
 					<slot />
-				</KolAlertWc>
+				</KolAlertWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/avatar/shadow.tsx b/packages/components/src/components/avatar/shadow.tsx
index 9a6111f6bc..53fa96f184 100644
--- a/packages/components/src/components/avatar/shadow.tsx
+++ b/packages/components/src/components/avatar/shadow.tsx
@@ -2,7 +2,7 @@ import type { JSX } from '@stencil/core';
 import { Component, h, Host, Prop } from '@stencil/core';
 
 import type { AvatarProps } from '@public-ui/schema';
-import { KolAvatarWc } from '../../core/component-names';
+import { KolAvatarWcTag } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-avatar',
@@ -15,7 +15,7 @@ export class KolAvatar implements AvatarProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<KolAvatarWc _src={this._src} _label={this._label}></KolAvatarWc>
+				<KolAvatarWcTag _src={this._src} _label={this._label}></KolAvatarWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/badge/component.tsx b/packages/components/src/components/badge/component.tsx
index a49b0ee3ad..c7ae56bd49 100644
--- a/packages/components/src/components/badge/component.tsx
+++ b/packages/components/src/components/badge/component.tsx
@@ -5,7 +5,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 import { nonce } from '../../utils/dev.utils';
 
 import type { JSX } from '@stencil/core';
-import { KolButtonWc } from '../../core/component-names';
+import { KolButtonWcTag } from '../../core/component-names';
 featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`);
 
 @Component({
@@ -22,7 +22,7 @@ export class KolBadge implements BadgeAPI {
 
 	private renderSmartButton(props: ButtonProps): JSX.Element {
 		return (
-			<KolButtonWc
+			<KolButtonWcTag
 				_ariaControls={this.id}
 				_customClass={props._customClass}
 				_disabled={props._disabled}
@@ -33,7 +33,7 @@ export class KolBadge implements BadgeAPI {
 				_on={props._on}
 				_tooltipAlign={props._tooltipAlign}
 				_variant={props._variant}
-			></KolButtonWc>
+			></KolButtonWcTag>
 		);
 	}
 
diff --git a/packages/components/src/components/breadcrumb/component.tsx b/packages/components/src/components/breadcrumb/component.tsx
index 2e548b6874..a7cda9acc1 100644
--- a/packages/components/src/components/breadcrumb/component.tsx
+++ b/packages/components/src/components/breadcrumb/component.tsx
@@ -6,7 +6,7 @@ import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from '../nav/validation';
 
 import type { JSX } from '@stencil/core';
-import { KolIcon, KolLink } from '../../core/component-names';
+import { KolIconTag, KolLinkTag } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-breadcrumb',
@@ -20,17 +20,17 @@ export class KolBreadcrumb implements BreadcrumbAPI {
 		const lastIndex = this.state._links.length - 1;
 		return (
 			<li key={index}>
-				{index !== 0 && <KolIcon _label="" _icons="codicon codicon-chevron-right" />}
+				{index !== 0 && <KolIconTag _label="" _icons="codicon codicon-chevron-right" />}
 				{index === lastIndex ? (
 					<span>
 						{link._hideLabel ? (
-							<KolIcon _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />
+							<KolIconTag _label={link._label} _icons={typeof link._icons === 'string' ? link._icons : 'codicon codicon-symbol-event'} />
 						) : (
 							<>{link._label}</>
 						)}
 					</span>
 				) : (
-					<KolLink {...link}></KolLink>
+					<KolLinkTag {...link}></KolLinkTag>
 				)}
 			</li>
 		);
diff --git a/packages/components/src/components/button-group/shadow.tsx b/packages/components/src/components/button-group/shadow.tsx
index 001572e0a6..cbcaff735f 100644
--- a/packages/components/src/components/button-group/shadow.tsx
+++ b/packages/components/src/components/button-group/shadow.tsx
@@ -1,7 +1,7 @@
 import type { ButtonGroupProps } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Host } from '@stencil/core';
-import { KolButtonGroupWc } from '../../core/component-names';
+import { KolButtonGroupWcTag } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-button-group',
@@ -14,9 +14,9 @@ export class KolButtonGroup implements ButtonGroupProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<KolButtonGroupWc>
+				<KolButtonGroupWcTag>
 					<slot />
-				</KolButtonGroupWc>
+				</KolButtonGroupWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/button-link/component.tsx b/packages/components/src/components/button-link/component.tsx
index 9ec378ba33..2e4ac14ca8 100644
--- a/packages/components/src/components/button-link/component.tsx
+++ b/packages/components/src/components/button-link/component.tsx
@@ -17,7 +17,7 @@ import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
-import { KolButtonWc } from '../../core/component-names';
+import { KolButtonWcTag } from '../../core/component-names';
 @Component({
 	tag: 'kol-button-link',
 	styleUrls: {
@@ -41,7 +41,7 @@ export class KolButtonLink implements ButtonLinkProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<KolButtonWc
+				<KolButtonWcTag
 					ref={this.catchRef}
 					_accessKey={this._accessKey}
 					_ariaControls={this._ariaControls}
@@ -62,7 +62,7 @@ export class KolButtonLink implements ButtonLinkProps {
 					_value={this._value}
 				>
 					<slot name="expert" slot="expert"></slot>
-				</KolButtonWc>
+				</KolButtonWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/button/component.tsx b/packages/components/src/components/button/component.tsx
index 4b9b4fde61..476613dc98 100644
--- a/packages/components/src/components/button/component.tsx
+++ b/packages/components/src/components/button/component.tsx
@@ -45,7 +45,7 @@ import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 import { stopPropagation, tryToDispatchKoliBriEvent } from '../../utils/events';
 import { propagateResetEventToForm, propagateSubmitEventToForm } from '../form/controller';
 import { AssociatedInputController } from '../input-adapter-leanup/associated.controller';
-import { KolSpanWc, KolTooltipWc } from '../../core/component-names';
+import { KolSpanWcTag, KolTooltipWcTag } from '../../core/component-names';
 
 /**
  * @internal
@@ -119,7 +119,7 @@ export class KolButtonWc implements ButtonAPI {
 					tabIndex={this.state._tabIndex}
 					type={this.state._type}
 				>
-					<KolSpanWc
+					<KolSpanWcTag
 						class="button-inner"
 						_accessKey={this.state._accessKey}
 						_icons={this.state._icons}
@@ -127,9 +127,9 @@ export class KolButtonWc implements ButtonAPI {
 						_label={hasExpertSlot ? '' : this.state._label}
 					>
 						<slot name="expert" slot="expert"></slot>
-					</KolSpanWc>
+					</KolSpanWcTag>
 				</button>
-				<KolTooltipWc
+				<KolTooltipWcTag
 					/**
 					 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,
 					 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.
@@ -139,7 +139,7 @@ export class KolButtonWc implements ButtonAPI {
 					_accessKey={this._accessKey}
 					_align={this.state._tooltipAlign}
 					_label={typeof this.state._label === 'string' ? this.state._label : ''}
-				></KolTooltipWc>
+				></KolTooltipWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/button/shadow.tsx b/packages/components/src/components/button/shadow.tsx
index 3f37ec1a53..a62c56aa1d 100644
--- a/packages/components/src/components/button/shadow.tsx
+++ b/packages/components/src/components/button/shadow.tsx
@@ -15,7 +15,7 @@ import type {
 } from '@public-ui/schema';
 import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Method, Prop } from '@stencil/core';
-import { KolButtonWc } from '../../core/component-names';
+import { KolButtonWcTag } from '../../core/component-names';
 
 import type { JSX } from '@stencil/core';
 @Component({
@@ -41,7 +41,7 @@ export class KolButton implements ButtonProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<KolButtonWc
+				<KolButtonWcTag
 					ref={this.catchRef}
 					class={{
 						button: true,
@@ -69,7 +69,7 @@ export class KolButton implements ButtonProps {
 					_variant={this._variant}
 				>
 					<slot name="expert" slot="expert"></slot>
-				</KolButtonWc>
+				</KolButtonWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/card/component.tsx b/packages/components/src/components/card/component.tsx
index 3a5182369e..578a82b961 100644
--- a/packages/components/src/components/card/component.tsx
+++ b/packages/components/src/components/card/component.tsx
@@ -14,7 +14,7 @@ import { translate } from '../../i18n';
 import { watchHeadingLevel } from '../heading/validation';
 
 import type { JSX } from '@stencil/core';
-import { KolButtonWc, KolHeadingWc } from '../../core/component-names';
+import { KolButtonWcTag, KolHeadingWcTag } from '../../core/component-names';
 /**
  * @slot - Ermöglicht das Einfügen beliebigen HTML's in den Inhaltsbereich der Card.
  */
@@ -41,13 +41,13 @@ export class KolCard implements CardAPI {
 			<Host>
 				<div class="card">
 					<div class="header">
-						<KolHeadingWc _label={this.state._label} _level={this.state._level}></KolHeadingWc>
+						<KolHeadingWcTag _label={this.state._label} _level={this.state._level}></KolHeadingWcTag>
 					</div>
 					<div class="content">
 						<slot />
 					</div>
 					{this.state._hasCloser && (
-						<KolButtonWc
+						<KolButtonWcTag
 							class="close"
 							_hideLabel
 							_icons={{
@@ -58,7 +58,7 @@ export class KolCard implements CardAPI {
 							_label={translate('kol-close')}
 							_on={this.on}
 							_tooltipAlign="left"
-						></KolButtonWc>
+						></KolButtonWcTag>
 					)}
 				</div>
 			</Host>
diff --git a/packages/components/src/components/details/component.tsx b/packages/components/src/components/details/component.tsx
index cfcbff565f..1335aca8b7 100644
--- a/packages/components/src/components/details/component.tsx
+++ b/packages/components/src/components/details/component.tsx
@@ -9,7 +9,7 @@ import type { DisabledPropType } from '@public-ui/schema';
 import { validateDisabled } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { preventDefaultAndStopPropagation } from '../../utils/events';
-import { KolIcon, KolIndentedText } from '../../core/component-names';
+import { KolIconTag, KolIndentedTextTag } from '../../core/component-names';
 
 /**
  * @slot - Der Inhalt, der in der Detailbeschreibung angezeigt wird.
@@ -64,13 +64,13 @@ export class KolDetails implements DetailsAPI {
 						onKeyPress={this.preventToggleIfDisabled}
 						tabIndex={this.state._disabled ? -1 : undefined}
 					>
-						<KolIcon _label="" _icons="codicon codicon-chevron-right" class={`icon ${this.state._open ? 'is-open' : ''}`} />
+						<KolIconTag _label="" _icons="codicon codicon-chevron-right" class={`icon ${this.state._open ? 'is-open' : ''}`} />
 						<span>{this.state._label}</span>
 					</summary>
 					<div aria-hidden={this.state._open === false ? 'true' : undefined} class="content" ref={(element) => (this.contentElement = element)}>
-						<KolIndentedText>
+						<KolIndentedTextTag>
 							<slot />
-						</KolIndentedText>
+						</KolIndentedTextTag>
 					</div>
 				</details>
 			</Host>
diff --git a/packages/components/src/components/form/component.tsx b/packages/components/src/components/form/component.tsx
index 014a87377b..7b2a15f621 100644
--- a/packages/components/src/components/form/component.tsx
+++ b/packages/components/src/components/form/component.tsx
@@ -5,7 +5,7 @@ import { Component, h, Prop, State, Watch } from '@stencil/core';
 import { translate } from '../../i18n';
 
 import type { ErrorListPropType, FormAPI, FormStates, KoliBriFormCallbacks, Stringified } from '@public-ui/schema';
-import { KolAlert, KolIndentedText, KolLink } from '../../core/component-names';
+import { KolAlertTag, KolIndentedTextTag, KolLinkTag } from '../../core/component-names';
 /**
  * @slot - Inhalt der Form.
  */
@@ -48,13 +48,13 @@ export class KolForm implements FormAPI {
 		return (
 			<form method="post" onSubmit={this.onSubmit} onReset={this.onReset} autoComplete="off" noValidate>
 				{this._errorList && this._errorList.length > 0 && (
-					<KolAlert _type="error">
+					<KolAlertTag _type="error">
 						{translate('kol-error-list-message')}
 						<nav aria-label={translate('kol-error-list')}>
 							<ul>
 								{this._errorList.map((error, index) => (
 									<li key={index}>
-										<KolLink
+										<KolLinkTag
 											_href={error.selector}
 											_label={error.message}
 											_on={{ onClick: this.handleLinkClick }}
@@ -66,15 +66,15 @@ export class KolForm implements FormAPI {
 								))}
 							</ul>
 						</nav>
-					</KolAlert>
+					</KolAlertTag>
 				)}
 				{this.state._requiredText === true ? (
 					<p>
-						<KolIndentedText>{translate('kol-form-description')}</KolIndentedText>
+						<KolIndentedTextTag>{translate('kol-form-description')}</KolIndentedTextTag>
 					</p>
 				) : typeof this.state._requiredText === 'string' && this.state._requiredText.length > 0 ? (
 					<p>
-						<KolIndentedText>{this.state._requiredText}</KolIndentedText>
+						<KolIndentedTextTag>{this.state._requiredText}</KolIndentedTextTag>
 					</p>
 				) : null}
 				<slot />
diff --git a/packages/components/src/components/heading/shadow.tsx b/packages/components/src/components/heading/shadow.tsx
index 65c955d3ff..074ef2eb7f 100644
--- a/packages/components/src/components/heading/shadow.tsx
+++ b/packages/components/src/components/heading/shadow.tsx
@@ -1,7 +1,7 @@
 import type { HeadingLevel, HeadingProps, HeadingVariantPropType, LabelWithExpertSlotPropType } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Prop } from '@stencil/core';
-import { KolHeadingWc } from '../../core/component-names';
+import { KolHeadingWcTag } from '../../core/component-names';
 
 /**
  * @slot headline - Content of the headline.
@@ -16,9 +16,9 @@ import { KolHeadingWc } from '../../core/component-names';
 export class KolHeading implements HeadingProps {
 	public render(): JSX.Element {
 		return (
-			<KolHeadingWc _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline} _variant={this._variant}>
+			<KolHeadingWcTag _label={this._label} _level={this._level} _secondaryHeadline={this._secondaryHeadline} _variant={this._variant}>
 				<slot name="expert" slot="expert" />
-			</KolHeadingWc>
+			</KolHeadingWcTag>
 		);
 	}
 
diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx
index 5604f2e65b..af22e9c89e 100644
--- a/packages/components/src/components/input-checkbox/component.tsx
+++ b/packages/components/src/components/input-checkbox/component.tsx
@@ -25,7 +25,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputCheckboxController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolIcon, KolInput } from '../../core/component-names';
+import { KolIconTag, KolInputTag } from '../../core/component-names';
 
 /**
  * @slot expert - Die Beschriftung der Checkbox.
@@ -58,7 +58,7 @@ export class KolInputCheckbox implements InputCheckboxAPI {
 
 		return (
 			<Host>
-				<KolInput
+				<KolInputTag
 					class={{
 						checkbox: true,
 						[this.state._variant]: true,
@@ -96,7 +96,7 @@ export class KolInputCheckbox implements InputCheckboxAPI {
 						)}
 					</span>
 					<label slot="input" class="checkbox-container">
-						<KolIcon
+						<KolIconTag
 							class="icon"
 							_icons={
 								this.state._indeterminate ? this.state._icons.indeterminate : this.state._checked ? this.state._icons.checked : this.state._icons.unchecked
@@ -123,7 +123,7 @@ export class KolInputCheckbox implements InputCheckboxAPI {
 							onClick={undefined} // onClick is not needed since onChange already triggers the correct event
 						/>
 					</label>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-color/component.tsx b/packages/components/src/components/input-color/component.tsx
index 49e43ee233..42491d1928 100644
--- a/packages/components/src/components/input-color/component.tsx
+++ b/packages/components/src/components/input-color/component.tsx
@@ -23,7 +23,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputColorController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -56,7 +56,7 @@ export class KolInputColor implements InputColorAPI {
 
 		return (
 			<Host>
-				<KolInput
+				<KolInputTag
 					class={{
 						color: true,
 						'hide-label': !!this.state._hideLabel,
@@ -112,7 +112,7 @@ export class KolInputColor implements InputColorAPI {
 							{...this.controller.onFacade}
 						/>
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-date/component.tsx b/packages/components/src/components/input-date/component.tsx
index 70e52fe202..64335ab3e0 100644
--- a/packages/components/src/components/input-date/component.tsx
+++ b/packages/components/src/components/input-date/component.tsx
@@ -27,7 +27,7 @@ import type {
 	SyncValueBySelectorPropType,
 	TooltipAlignPropType,
 } from '@public-ui/schema';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -71,7 +71,7 @@ export class KolInputDate implements InputDateAPI {
 
 		return (
 			<Host class={{ 'has-value': this.state._hasValue }}>
-				<KolInput
+				<KolInputTag
 					class={{
 						[this.state._type]: true,
 						'hide-label': !!this.state._hideLabel,
@@ -132,7 +132,7 @@ export class KolInputDate implements InputDateAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-email/component.tsx b/packages/components/src/components/input-email/component.tsx
index ed9a124684..69f11a0a9e 100644
--- a/packages/components/src/components/input-email/component.tsx
+++ b/packages/components/src/components/input-email/component.tsx
@@ -25,7 +25,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputEmailController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -74,7 +74,7 @@ export class KolInputEmail implements InputEmailAPI {
 					'has-value': this.state._hasValue,
 				}}
 			>
-				<KolInput
+				<KolInputTag
 					class={{ email: true, 'hide-label': !!this.state._hideLabel }}
 					_accessKey={this.state._accessKey}
 					_alert={this.state._alert}
@@ -139,7 +139,7 @@ export class KolInputEmail implements InputEmailAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-file/component.tsx b/packages/components/src/components/input-file/component.tsx
index e3f0c19cc3..6ad4838ea7 100644
--- a/packages/components/src/components/input-file/component.tsx
+++ b/packages/components/src/components/input-file/component.tsx
@@ -22,7 +22,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputFileController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -54,7 +54,7 @@ export class KolInputFile implements InputFileAPI {
 
 		return (
 			<Host>
-				<KolInput
+				<KolInputTag
 					class={{
 						file: true,
 						'hide-label': !!this.state._hideLabel,
@@ -111,7 +111,7 @@ export class KolInputFile implements InputFileAPI {
 							onChange={this.onChange}
 						/>
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-number/component.tsx b/packages/components/src/components/input-number/component.tsx
index d8d29b68fb..7e78de5ded 100644
--- a/packages/components/src/components/input-number/component.tsx
+++ b/packages/components/src/components/input-number/component.tsx
@@ -25,7 +25,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputNumberController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -73,7 +73,7 @@ export class KolInputNumber implements InputNumberAPI {
 					'has-value': this.state._hasValue,
 				}}
 			>
-				<KolInput
+				<KolInputTag
 					class={{
 						number: true,
 						'hide-label': !!this.state._hideLabel,
@@ -135,7 +135,7 @@ export class KolInputNumber implements InputNumberAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-password/component.tsx b/packages/components/src/components/input-password/component.tsx
index b2b19f0b6a..b3ad0385cc 100644
--- a/packages/components/src/components/input-password/component.tsx
+++ b/packages/components/src/components/input-password/component.tsx
@@ -23,7 +23,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputPasswordController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -71,7 +71,7 @@ export class KolInputPassword implements InputPasswordAPI {
 					'has-value': this.state._hasValue,
 				}}
 			>
-				<KolInput
+				<KolInputTag
 					class={{
 						'hide-label': !!this.state._hideLabel,
 						password: true,
@@ -135,7 +135,7 @@ export class KolInputPassword implements InputPasswordAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-radio/component.tsx b/packages/components/src/components/input-radio/component.tsx
index 8777b88883..8fd65c5296 100644
--- a/packages/components/src/components/input-radio/component.tsx
+++ b/packages/components/src/components/input-radio/component.tsx
@@ -25,7 +25,7 @@ import { InputRadioController } from './controller';
 
 import type { JSX } from '@stencil/core';
 import { FormFieldMsg } from '../@shared/form-field-msg';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 
 /**
  * @slot - Die Legende/Überschrift der Radiobuttons.
@@ -91,7 +91,7 @@ export class KolInputRadio implements InputRadioAPI {
 						const customId = `${this.state._id}-${index}`;
 						const slotName = `radio-${index}`;
 						return (
-							<KolInput
+							<KolInputTag
 								class={{
 									radio: true,
 									disabled: Boolean(this.state._disabled || option.disabled),
@@ -143,7 +143,7 @@ export class KolInputRadio implements InputRadioAPI {
 										</span>
 									</label>
 								</div>
-							</KolInput>
+							</KolInputTag>
 						);
 					})}
 					{hasError && <FormFieldMsg _alert={this.state._alert} _hideError={this.state._hideError} _error={this.state._error} _id={this.state._id} />}
diff --git a/packages/components/src/components/input-range/component.tsx b/packages/components/src/components/input-range/component.tsx
index ebde1e2986..783a3ba2b8 100644
--- a/packages/components/src/components/input-range/component.tsx
+++ b/packages/components/src/components/input-range/component.tsx
@@ -24,7 +24,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputRangeController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabeelements.
  */
@@ -109,7 +109,7 @@ export class KolInputRange implements InputRangeAPI {
 
 		return (
 			<Host>
-				<KolInput
+				<KolInputTag
 					class={{
 						range: true,
 						'hide-label': !!this.state._hideLabel,
@@ -206,7 +206,7 @@ export class KolInputRange implements InputRangeAPI {
 							// </ul>,
 						]}
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input-text/component.tsx b/packages/components/src/components/input-text/component.tsx
index b26be4203f..7c252d3b27 100644
--- a/packages/components/src/components/input-text/component.tsx
+++ b/packages/components/src/components/input-text/component.tsx
@@ -26,7 +26,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { InputTextController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 /**
  * @slot - Die Beschriftung des Eingabefeldes.
  */
@@ -85,7 +85,7 @@ export class KolInputText implements InputTextAPI {
 					'has-value': this.state._hasValue,
 				}}
 			>
-				<KolInput
+				<KolInputTag
 					class={{
 						[this.state._type]: true,
 						'hide-label': !!this.state._hideLabel,
@@ -152,7 +152,7 @@ export class KolInputText implements InputTextAPI {
 							onKeyUp={this.onKeyUp}
 						/>
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/input/component.tsx b/packages/components/src/components/input/component.tsx
index 220e94b989..791a456be2 100644
--- a/packages/components/src/components/input/component.tsx
+++ b/packages/components/src/components/input/component.tsx
@@ -20,7 +20,7 @@ import type {
 } from '@public-ui/schema';
 import { FormFieldMsg } from '../@shared/form-field-msg';
 import type { Props } from './types';
-import { KolButtonWc, KolIcon, KolTooltipWc } from '../../core/component-names';
+import { KolButtonWcTag, KolIconTag, KolTooltipWcTag } from '../../core/component-names';
 
 /**
  * @internal
@@ -83,11 +83,11 @@ export class KolInput implements Props {
 					}}
 				>
 					{this._icons?.left && (
-						<KolIcon _label="" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></KolIcon>
+						<KolIconTag _label="" _icons={(this._icons?.left as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.left)}></KolIconTag>
 					)}
 					<div ref={this.catchInputSlot} id={this.slotName} class="input-slot"></div>
 					{typeof this._smartButton === 'object' && this._smartButton !== null && (
-						<KolButtonWc
+						<KolButtonWcTag
 							_customClass={this._smartButton._customClass}
 							_disabled={this._smartButton._disabled}
 							_icons={this._smartButton._icons}
@@ -97,14 +97,14 @@ export class KolInput implements Props {
 							_on={this._smartButton._on}
 							_tooltipAlign={this._smartButton._tooltipAlign}
 							_variant={this._smartButton._variant}
-						></KolButtonWc>
+						></KolButtonWcTag>
 					)}
 					{this._icons?.right && (
-						<KolIcon _label="" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIcon>
+						<KolIconTag _label="" _icons={(this._icons?.right as KoliBriCustomIcon).icon} style={this.getIconStyles(this._icons?.right)}></KolIconTag>
 					)}
 				</div>
 				{useTooltopInsteadOfLabel && (
-					<KolTooltipWc
+					<KolTooltipWcTag
 						/**
 						 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,
 						 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.
@@ -115,7 +115,7 @@ export class KolInput implements Props {
 						_align={this._tooltipAlign}
 						_id={this._hideLabel ? `${this._id}-label` : undefined}
 						_label={this._label}
-					></KolTooltipWc>
+					></KolTooltipWcTag>
 				)}
 				{hasError && <FormFieldMsg _alert={this._alert} _hideError={this._hideError} _error={this._error} _id={this._id} />}
 				{Array.isArray(this._suggestions) && this._suggestions.length > 0 && (
diff --git a/packages/components/src/components/link-button/component.tsx b/packages/components/src/components/link-button/component.tsx
index 173d3a7dcc..6aef7b9e1d 100644
--- a/packages/components/src/components/link-button/component.tsx
+++ b/packages/components/src/components/link-button/component.tsx
@@ -17,7 +17,7 @@ import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
-import { KolLinkWc } from '../../core/component-names';
+import { KolLinkWcTag } from '../../core/component-names';
 @Component({
 	tag: 'kol-link-button',
 	styleUrls: {
@@ -35,7 +35,7 @@ export class KolLinkButton implements LinkButtonProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<KolLinkWc
+				<KolLinkWcTag
 					ref={this.catchRef}
 					class={{
 						button: true,
@@ -57,7 +57,7 @@ export class KolLinkButton implements LinkButtonProps {
 					_tooltipAlign={this._tooltipAlign}
 				>
 					<slot name="expert" slot="expert"></slot>
-				</KolLinkWc>
+				</KolLinkWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/link-group/component.tsx b/packages/components/src/components/link-group/component.tsx
index 1cd66c103e..8890fb0469 100644
--- a/packages/components/src/components/link-group/component.tsx
+++ b/packages/components/src/components/link-group/component.tsx
@@ -6,7 +6,7 @@ import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from '../nav/validation';
 
 import type { JSX } from '@stencil/core';
-import { KolLink } from '../../core/component-names';
+import { KolLinkTag } from '../../core/component-names';
 const ListItem = (props: { links: LinkProps[]; orientation: Orientation; listStyleType: ListStyleType }): JSX.Element => {
 	const list: JSX.Element[] = [];
 	props.links.map((link, index: number) => {
@@ -22,7 +22,7 @@ const ListItem = (props: { links: LinkProps[]; orientation: Orientation; listSty
 						listStyleType: props.listStyleType,
 					}}
 				>
-					<KolLink {...link}></KolLink>
+					<KolLinkTag {...link}></KolLinkTag>
 				</li>
 			) as JSX.Element
 		);
diff --git a/packages/components/src/components/link/component.tsx b/packages/components/src/components/link/component.tsx
index 7bb487b5d6..3290ee31bd 100644
--- a/packages/components/src/components/link/component.tsx
+++ b/packages/components/src/components/link/component.tsx
@@ -41,7 +41,7 @@ import { validateDisabled } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import type { UnsubscribeFunction } from './ariaCurrentService';
 import { preventDefaultAndStopPropagation } from '../../utils/events';
-import { KolIcon, KolSpanWc, KolTooltipWc } from '../../core/component-names';
+import { KolIconTag, KolSpanWcTag, KolTooltipWcTag } from '../../core/component-names';
 /**
  * @internal
  */
@@ -133,16 +133,16 @@ export class KolLinkWc implements LinkAPI {
 					role={this.state._role}
 					tabIndex={this.state._disabled ? -1 : this.state._tabIndex}
 				>
-					<KolSpanWc
+					<KolSpanWcTag
 						_accessKey={this.state._accessKey}
 						_icons={this.state._icons}
 						_hideLabel={this.state._hideLabel}
 						_label={hasExpertSlot ? '' : this.state._label || this.state._href}
 					>
 						<slot name="expert" slot="expert"></slot>
-					</KolSpanWc>
+					</KolSpanWcTag>
 					{isExternal && (
-						<KolIcon
+						<KolIconTag
 							class="external-link-icon"
 							_label={this.state._hideLabel ? '' : translate('kol-open-link-in-tab')}
 							_icons={'codicon codicon-link-external'}
@@ -150,7 +150,7 @@ export class KolLinkWc implements LinkAPI {
 						/>
 					)}
 				</a>
-				<KolTooltipWc
+				<KolTooltipWcTag
 					/**
 					 * Dieses Aria-Hidden verhindert das doppelte Vorlesen des Labels,
 					 * verhindert aber nicht das Aria-Labelledby vorgelesen wird.
@@ -160,7 +160,7 @@ export class KolLinkWc implements LinkAPI {
 					_accessKey={this.state._accessKey}
 					_align={this.state._tooltipAlign}
 					_label={this.state._label || this.state._href}
-				></KolTooltipWc>
+				></KolTooltipWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
index 1b37664803..454ea7fa02 100644
--- a/packages/components/src/components/link/shadow.tsx
+++ b/packages/components/src/components/link/shadow.tsx
@@ -16,7 +16,7 @@ import { propagateFocus } from '@public-ui/schema';
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
-import { KolLinkWc } from '../../core/component-names';
+import { KolLinkWcTag } from '../../core/component-names';
 @Component({
 	tag: 'kol-link',
 	styleUrls: {
@@ -34,7 +34,7 @@ export class KolLink implements LinkProps {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<KolLinkWc
+				<KolLinkWcTag
 					ref={this.catchRef}
 					_accessKey={this._accessKey}
 					_ariaCurrentValue={this._ariaCurrentValue}
@@ -55,7 +55,7 @@ export class KolLink implements LinkProps {
 						die Unterstützung hinsichtlich der Barrierefreiheit der Komponente zu umgehen.
 					*/}
 					<slot name="expert" slot="expert"></slot>
-				</KolLinkWc>
+				</KolLinkWcTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/nav/component.tsx b/packages/components/src/components/nav/component.tsx
index 5c02c0a611..5eacb73c3e 100644
--- a/packages/components/src/components/nav/component.tsx
+++ b/packages/components/src/components/nav/component.tsx
@@ -27,7 +27,7 @@ import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from './validation';
 
 import type { JSX } from '@stencil/core';
-import { KolButton, KolButtonWc, KolLinkWc } from '../../core/component-names';
+import { KolButtonTag, KolButtonWcTag, KolLinkWcTag } from '../../core/component-names';
 const linkValidator = (link: ButtonOrLinkOrTextWithChildrenProps): boolean => {
 	if (typeof link === 'object' && typeof link._label === 'string' /* && typeof newLink._href === 'string' */) {
 		if (Array.isArray(link._children)) {
@@ -91,9 +91,9 @@ export class KolNav implements NavAPI {
 		return (
 			<div class={{ entry: true, 'hide-label': hideLabel }}>
 				{'_href' in link ? (
-					<KolLinkWc class="entry-item" {...link} _hideLabel={hideLabel} _icons={icons} />
+					<KolLinkWcTag class="entry-item" {...link} _hideLabel={hideLabel} _icons={icons} />
 				) : (
-					<KolButtonWc
+					<KolButtonWcTag
 						class="entry-item"
 						_label={link._label}
 						_hideLabel={hideLabel}
@@ -109,7 +109,7 @@ export class KolNav implements NavAPI {
 
 	private expandButton(collapsible: boolean, link: ButtonWithChildrenProps, expanded: boolean): JSX.Element {
 		return (
-			<KolButtonWc
+			<KolButtonWcTag
 				class="expand-button"
 				_ariaExpanded={expanded}
 				_disabled={!collapsible}
@@ -117,7 +117,7 @@ export class KolNav implements NavAPI {
 				_hideLabel
 				_label={`Untermenü zu ${link._label} ${expanded ? 'schließen' : 'öffnen'}`}
 				_on={{ onClick: () => this.handleToggleExpansionClick(link._children) }}
-			></KolButtonWc>
+			></KolButtonWcTag>
 		);
 	}
 
@@ -211,7 +211,7 @@ export class KolNav implements NavAPI {
 					</nav>
 					{hasCompactButton && (
 						<div class="compact">
-							<KolButton
+							<KolButtonTag
 								_ariaControls="nav"
 								_ariaExpanded={!hideLabel}
 								_icons={hideLabel ? 'codicon codicon-chevron-right' : 'codicon codicon-chevron-left'}
@@ -227,7 +227,7 @@ export class KolNav implements NavAPI {
 								}}
 								_tooltipAlign="right"
 								_variant="ghost"
-							></KolButton>
+							></KolButtonTag>
 						</div>
 					)}
 				</div>
diff --git a/packages/components/src/components/pagination/component.tsx b/packages/components/src/components/pagination/component.tsx
index edbe9704b1..4af8bb5701 100644
--- a/packages/components/src/components/pagination/component.tsx
+++ b/packages/components/src/components/pagination/component.tsx
@@ -27,7 +27,7 @@ import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 import { translate } from '../../i18n';
 import { nonce } from '../../utils/dev.utils';
 import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
-import { KolButtonWc, KolSelect } from '../../core/component-names';
+import { KolButtonWcTag, KolSelectTag } from '../../core/component-names';
 
 const leftDoubleArrowIcon = {
 	left: 'codicon codicon-debug-reverse-continue',
@@ -91,7 +91,7 @@ export class KolPagination implements PaginationAPI {
 					<ul class="navigation-list">
 						{this.state._hasButtons.first && (
 							<li>
-								<KolButtonWc
+								<KolButtonWcTag
 									class="first"
 									exportparts="icon"
 									_customClass={this.state._customClass}
@@ -101,12 +101,12 @@ export class KolPagination implements PaginationAPI {
 									_label={translate('kol-page-first')}
 									_on={this.onGoToFirst}
 									_tooltipAlign={this.state._tooltipAlign}
-								></KolButtonWc>
+								></KolButtonWcTag>
 							</li>
 						)}
 						{this.state._hasButtons.previous && (
 							<li>
-								<KolButtonWc
+								<KolButtonWcTag
 									class="previous"
 									exportparts="icon"
 									_customClass={this.state._customClass}
@@ -116,13 +116,13 @@ export class KolPagination implements PaginationAPI {
 									_label={translate('kol-page-back')}
 									_on={this.onGoBackward}
 									_tooltipAlign={this.state._tooltipAlign}
-								></KolButtonWc>
+								></KolButtonWcTag>
 							</li>
 						)}
 						{pageButtons}
 						{this.state._hasButtons.next && (
 							<li>
-								<KolButtonWc
+								<KolButtonWcTag
 									class="next"
 									exportparts="icon"
 									_customClass={this.state._customClass}
@@ -132,12 +132,12 @@ export class KolPagination implements PaginationAPI {
 									_label={translate('kol-page-next')}
 									_on={this.onGoForward}
 									_tooltipAlign={this.state._tooltipAlign}
-								></KolButtonWc>
+								></KolButtonWcTag>
 							</li>
 						)}
 						{this.state._hasButtons.last && (
 							<li>
-								<KolButtonWc
+								<KolButtonWcTag
 									class="last"
 									exportparts="icon"
 									_customClass={this.state._customClass}
@@ -147,13 +147,13 @@ export class KolPagination implements PaginationAPI {
 									_label={translate('kol-page-last')}
 									_on={this.onGoToEnd}
 									_tooltipAlign={this.state._tooltipAlign}
-								></KolButtonWc>
+								></KolButtonWcTag>
 							</li>
 						)}
 					</ul>
 				</nav>
 				{this.state._pageSizeOptions?.length > 0 && (
-					<KolSelect
+					<KolSelectTag
 						_hideLabel
 						_id={`pagination-size-${this.nonce}`}
 						_label={translate('kol-entries-per-site')}
@@ -162,7 +162,7 @@ export class KolPagination implements PaginationAPI {
 							onChange: this.onChangePageSize,
 						}}
 						_value={[this.state._pageSize]}
-					></KolSelect>
+					></KolSelectTag>
 				)}
 			</Host>
 		);
@@ -295,7 +295,7 @@ export class KolPagination implements PaginationAPI {
 	private getUnselectedPageButton(page: number): JSX.Element {
 		return (
 			<li>
-				<KolButtonWc
+				<KolButtonWcTag
 					exportparts="icon"
 					key={`${this.nonce}-${page}`}
 					_customClass={this.state._customClass}
@@ -309,7 +309,7 @@ export class KolPagination implements PaginationAPI {
 					<span slot="expert">
 						<span class="visually-hidden">{translate('kol-page')}</span> {page}
 					</span>
-				</KolButtonWc>
+				</KolButtonWcTag>
 			</li>
 		);
 	}
@@ -317,11 +317,11 @@ export class KolPagination implements PaginationAPI {
 	private getSelectedPageButton(page: number): JSX.Element {
 		return (
 			<li>
-				<KolButtonWc class="selected" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label="">
+				<KolButtonWcTag class="selected" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label="">
 					<span slot="expert">
 						<span class="visually-hidden">{translate('kol-page')}</span> {page}
 					</span>
-				</KolButtonWc>
+				</KolButtonWcTag>
 			</li>
 		);
 	}
diff --git a/packages/components/src/components/quote/shadow.tsx b/packages/components/src/components/quote/shadow.tsx
index cac8967f6e..ade4aa9a1b 100644
--- a/packages/components/src/components/quote/shadow.tsx
+++ b/packages/components/src/components/quote/shadow.tsx
@@ -3,7 +3,7 @@ import { koliBriQuoteVariantOptions, showExpertSlot, validateLabel, watchString,
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
-import { KolLink } from '../../core/component-names';
+import { KolLinkTag } from '../../core/component-names';
 @Component({
 	tag: 'kol-quote',
 	styleUrls: {
@@ -102,7 +102,7 @@ export class KolQuote implements QuoteAPI {
 					{typeof this.state._label === 'string' && this.state._label.length > 0 && (
 						<figcaption>
 							<cite>
-								<KolLink _href={this.state._href} _label={this.state._label} _target="_blank" />
+								<KolLinkTag _href={this.state._href} _label={this.state._label} _target="_blank" />
 							</cite>
 						</figcaption>
 					)}
diff --git a/packages/components/src/components/select/component.tsx b/packages/components/src/components/select/component.tsx
index cb9bf3df91..97d36a543d 100644
--- a/packages/components/src/components/select/component.tsx
+++ b/packages/components/src/components/select/component.tsx
@@ -27,7 +27,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { SelectController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 const isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {
 	return Array.isArray(valueList) && valueList.includes(optionValue);
 };
@@ -88,7 +88,7 @@ export class KolSelect implements SelectAPI {
 
 		return (
 			<Host class={{ 'has-value': this.state._hasValue }}>
-				<KolInput
+				<KolInputTag
 					class={{
 						'hide-label': !!this.state._hideLabel,
 						select: true,
@@ -170,7 +170,7 @@ export class KolSelect implements SelectAPI {
 							})}
 						</select>
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/skip-nav/component.tsx b/packages/components/src/components/skip-nav/component.tsx
index 64d5a3f9e5..41da2fc881 100644
--- a/packages/components/src/components/skip-nav/component.tsx
+++ b/packages/components/src/components/skip-nav/component.tsx
@@ -6,7 +6,7 @@ import { addNavLabel, removeNavLabel } from '../../utils/unique-nav-labels';
 import { watchNavLinks } from '../nav/validation';
 
 import type { JSX } from '@stencil/core';
-import { KolLinkWc } from '../../core/component-names';
+import { KolLinkWcTag } from '../../core/component-names';
 @Component({
 	tag: 'kol-skip-nav',
 	styleUrls: {
@@ -22,7 +22,7 @@ export class KolSkipNav implements SkipNavAPI {
 					{this.state._links.map((link: LinkProps, index: number) => {
 						return (
 							<li key={index}>
-								<KolLinkWc {...link}></KolLinkWc>
+								<KolLinkWcTag {...link}></KolLinkWcTag>
 							</li>
 						);
 					})}
diff --git a/packages/components/src/components/span/component.tsx b/packages/components/src/components/span/component.tsx
index 9fd8e6e478..86b0df66dd 100644
--- a/packages/components/src/components/span/component.tsx
+++ b/packages/components/src/components/span/component.tsx
@@ -6,7 +6,7 @@ import { md } from '../../utils/markdown';
 import { InternalUnderlinedAccessKey } from './InternalUnderlinedAccessKey';
 
 import type { JSX } from '@stencil/core';
-import { KolIcon } from '../../core/component-names';
+import { KolIconTag } from '../../core/component-names';
 /**
  * @internal
  */
@@ -24,11 +24,16 @@ export class KolSpanWc implements SpanAPI {
 				}}
 			>
 				{this.state._icons.top && (
-					<KolIcon class="icon top" style={this.state._icons.top.style} _label={this.state._icons.top.label ?? ''} _icons={this.state._icons.top.icon} />
+					<KolIconTag class="icon top" style={this.state._icons.top.style} _label={this.state._icons.top.label ?? ''} _icons={this.state._icons.top.icon} />
 				)}
 				<span>
 					{this.state._icons.left && (
-						<KolIcon class="icon left" style={this.state._icons.left.style} _label={this.state._icons.left.label ?? ''} _icons={this.state._icons.left.icon} />
+						<KolIconTag
+							class="icon left"
+							style={this.state._icons.left.style}
+							_label={this.state._icons.left.label ?? ''}
+							_icons={this.state._icons.left.icon}
+						/>
 					)}
 					{!this.state._hideLabel && hideExpertSlot ? (
 						this.state._allowMarkdown && typeof this.state._label === 'string' && this.state._label.length > 0 ? (
@@ -54,7 +59,7 @@ export class KolSpanWc implements SpanAPI {
 						</span>
 					)}
 					{this.state._icons.right && (
-						<KolIcon
+						<KolIconTag
 							class="icon right"
 							style={this.state._icons.right.style}
 							_label={this.state._icons.right.label ?? ''}
@@ -63,7 +68,7 @@ export class KolSpanWc implements SpanAPI {
 					)}
 				</span>
 				{this.state._icons.bottom && (
-					<KolIcon
+					<KolIconTag
 						class="icon bottom"
 						style={this.state._icons.bottom.style}
 						_label={this.state._icons.bottom.label ?? ''}
diff --git a/packages/components/src/components/span/shadow.tsx b/packages/components/src/components/span/shadow.tsx
index 2e2bd8ed04..14afd939c7 100644
--- a/packages/components/src/components/span/shadow.tsx
+++ b/packages/components/src/components/span/shadow.tsx
@@ -1,7 +1,7 @@
 import type { AccessKeyPropType, KoliBriIconsProp, LabelWithExpertSlotPropType, SpanProps, Stringified } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Prop } from '@stencil/core';
-import { KolSpanWc } from '../../core/component-names';
+import { KolSpanWcTag } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-span',
@@ -13,9 +13,9 @@ import { KolSpanWc } from '../../core/component-names';
 export class KolSpan implements SpanProps {
 	public render(): JSX.Element {
 		return (
-			<KolSpanWc _icons={this._icons} _hideLabel={this._hideLabel} _label={this._label} _accessKey={this._accessKey}>
+			<KolSpanWcTag _icons={this._icons} _hideLabel={this._hideLabel} _label={this._label} _accessKey={this._accessKey}>
 				<slot name="expert" slot="expert"></slot>
-			</KolSpanWc>
+			</KolSpanWcTag>
 		);
 	}
 
diff --git a/packages/components/src/components/split-button/component.tsx b/packages/components/src/components/split-button/component.tsx
index 4a07d501c2..fe4187ac53 100644
--- a/packages/components/src/components/split-button/component.tsx
+++ b/packages/components/src/components/split-button/component.tsx
@@ -15,7 +15,7 @@ import type {
 } from '@public-ui/schema';
 import type { JSX } from '@stencil/core';
 import { Component, h, Host, Prop, State } from '@stencil/core';
-import { KolButtonWc } from '../../core/component-names';
+import { KolButtonWcTag } from '../../core/component-names';
 
 /**
  * @slot - Ermöglicht das Einfügen beliebigen HTMLs in das dropdown.
@@ -73,7 +73,7 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 	public render(): JSX.Element {
 		return (
 			<Host>
-				<KolButtonWc
+				<KolButtonWcTag
 					class={{
 						'main-button': true,
 						button: true,
@@ -97,16 +97,16 @@ export class KolSplitButton implements SplitButtonProps /*, SplitButtonAPI*/ {
 					_type={this._type}
 					_value={this._value}
 					_variant={this._variant}
-				></KolButtonWc>
+				></KolButtonWcTag>
 				<div class="horizontal-line"></div>
-				<KolButtonWc
+				<KolButtonWcTag
 					class="secondary-button"
 					_disabled={this._disabled}
 					_hideLabel
 					_icons="codicon codicon-triangle-down"
 					_label={`dropdown ${this.state._show ? 'schließen' : 'öffnen'}`} // @todo: translate
 					_on={this.clickToggleHandler}
-				></KolButtonWc>
+				></KolButtonWcTag>
 				<div class="popover" ref={this.catchDropdownElements}>
 					<div class="popover-content">
 						<slot />
diff --git a/packages/components/src/components/table/component.tsx b/packages/components/src/components/table/component.tsx
index da5fe35d60..4115e25d7a 100644
--- a/packages/components/src/components/table/component.tsx
+++ b/packages/components/src/components/table/component.tsx
@@ -25,7 +25,7 @@ import type {
 	TableStates,
 } from '@public-ui/schema';
 import { validatePaginationPosition } from '@public-ui/schema';
-import { KolButton, KolButtonWc, KolPagination } from '../../core/component-names';
+import { KolButtonTag, KolButtonWcTag, KolPaginationTag } from '../../core/component-names';
 const PAGINATION_OPTIONS = [10, 20, 50, 100];
 
 const CELL_REFS = new Map<HTMLElement, ReturnType<typeof setTimeout>>();
@@ -742,7 +742,7 @@ export class KolTable implements TableAPI {
 							{headerCell.label}
 						</div>
 						{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') && (
-							<KolButton
+							<KolButtonTag
 								exportparts="icon"
 								_icons={sortButtonIcon}
 								_hideLabel
@@ -751,7 +751,7 @@ export class KolTable implements TableAPI {
 									onClick: () => this.changeCellSort(headerCell),
 								}}
 								_variant="ghost"
-							></KolButton>
+							></KolButtonTag>
 						)}
 					</div>
 				</th>
@@ -806,7 +806,7 @@ export class KolTable implements TableAPI {
 					})}
 				</span>
 				<div>
-					<KolPagination
+					<KolPaginationTag
 						_boundaryCount={this.state._pagination._boundaryCount}
 						_customClass={this.state._pagination._customClass}
 						_on={this.handlePagination}
@@ -817,7 +817,7 @@ export class KolTable implements TableAPI {
 						_tooltipAlign="bottom"
 						_max={this.state._pagination._max || this.state._pagination._max || this.state._data.length}
 						_label={translate('kol-table-pagination-label', { placeholders: { label: this.state._label } })}
-					></KolPagination>
+					></KolPaginationTag>
 				</div>
 			</div>
 		);
@@ -934,7 +934,7 @@ export class KolTable implements TableAPI {
 														data-sort={`sort-${shortSortDirection}`}
 													>
 														{!this.disableSort && (typeof headerCell.compareFn === 'function' || typeof headerCell.sort === 'function') ? (
-															<KolButtonWc
+															<KolButtonWcTag
 																class="table-sort-button"
 																exportparts="icon"
 																_icons={{ right: sortButtonIcon }}
@@ -942,7 +942,7 @@ export class KolTable implements TableAPI {
 																_on={{
 																	onClick: () => this.changeCellSort(headerCell),
 																}}
-															></KolButtonWc>
+															></KolButtonWcTag>
 														) : (
 															col.label
 														)}
diff --git a/packages/components/src/components/tabs/component.tsx b/packages/components/src/components/tabs/component.tsx
index 56bbab372e..9b30b457af 100644
--- a/packages/components/src/components/tabs/component.tsx
+++ b/packages/components/src/components/tabs/component.tsx
@@ -27,7 +27,7 @@ import { translate } from '../../i18n';
 
 import type { JSX } from '@stencil/core';
 import type { Generic } from 'adopted-style-sheets';
-import { KolButtonGroupWc, KolButtonWc } from '../../core/component-names';
+import { KolButtonGroupWcTag, KolButtonWcTag } from '../../core/component-names';
 // https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-2/tabs.html
 
 @Component({
@@ -103,9 +103,9 @@ export class KolTabs implements TabsAPI {
 
 	private renderButtonGroup() {
 		return (
-			<KolButtonGroupWc class="tabs-button-group" role="tablist" aria-label={this.state._label} onKeyDown={this.onKeyDown}>
+			<KolButtonGroupWcTag class="tabs-button-group" role="tablist" aria-label={this.state._label} onKeyDown={this.onKeyDown}>
 				{this.state._tabs.map((button: TabButtonProps, index: number) => (
-					<KolButtonWc
+					<KolButtonWcTag
 						_disabled={button._disabled}
 						_icons={button._icons}
 						_hideLabel={button._hideLabel}
@@ -120,18 +120,18 @@ export class KolTabs implements TabsAPI {
 						_id={`${this.state._label.replace(/\s/g, '-')}-tab-${index}`}
 						_role="tab"
 						_value={index}
-					></KolButtonWc>
+					></KolButtonWcTag>
 				))}
 				{this.showCreateTab && (
-					<KolButtonWc
+					<KolButtonWcTag
 						class="create-button"
 						_label={this.onCreateLabel}
 						_on={{
 							onClick: this.onCreate,
 						}}
-					></KolButtonWc>
+					></KolButtonWcTag>
 				)}
-			</KolButtonGroupWc>
+			</KolButtonGroupWcTag>
 		);
 	}
 
diff --git a/packages/components/src/components/textarea/component.tsx b/packages/components/src/components/textarea/component.tsx
index 5dfe966a51..3218256a6b 100644
--- a/packages/components/src/components/textarea/component.tsx
+++ b/packages/components/src/components/textarea/component.tsx
@@ -22,7 +22,7 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
 import { TextareaController } from './controller';
 
 import type { JSX } from '@stencil/core';
-import { KolInput } from '../../core/component-names';
+import { KolInputTag } from '../../core/component-names';
 /**
  * https://stackoverflow.com/questions/17772260/textarea-auto-height
  */
@@ -67,7 +67,7 @@ export class KolTextarea implements TextareaAPI {
 
 		return (
 			<Host class={{ 'has-value': this.state._hasValue }}>
-				<KolInput
+				<KolInputTag
 					class={{ textarea: true, 'hide-label': !!this.state._hideLabel, 'has-counter': !!this.state._hasCounter }}
 					_accessKey={this.state._accessKey}
 					_alert={this.state._alert}
@@ -128,7 +128,7 @@ export class KolTextarea implements TextareaAPI {
 							value={this.state._value}
 						/>
 					</div>
-				</KolInput>
+				</KolInputTag>
 			</Host>
 		);
 	}
diff --git a/packages/components/src/components/toaster/component.tsx b/packages/components/src/components/toaster/component.tsx
index 3ef3c37edd..5405687595 100644
--- a/packages/components/src/components/toaster/component.tsx
+++ b/packages/components/src/components/toaster/component.tsx
@@ -6,7 +6,7 @@ import { nonce } from '../../utils/dev.utils';
 import { InternalToast } from './InternalToast';
 
 import type { Toast, ToasterAPI, ToasterStates, ToastState } from '@public-ui/schema';
-import { KolButton } from '../../core/component-names';
+import { KolButtonTag } from '../../core/component-names';
 const TRANSITION_TIMEOUT = 300;
 
 @Component({
@@ -96,7 +96,7 @@ export class KolToastContainer implements ToasterAPI {
 		return (
 			<>
 				{this.state._toastStates.length > 1 && (
-					<KolButton
+					<KolButtonTag
 						_label={translate('kol-toast-close-all')}
 						class="close-all"
 						_on={{
@@ -104,7 +104,7 @@ export class KolToastContainer implements ToasterAPI {
 								void this.closeAll();
 							},
 						}}
-					></KolButton>
+					></KolButtonTag>
 				)}
 				{this.state._toastStates.map((toastState) => (
 					<InternalToast toastState={toastState} onClose={() => this.handleClose(toastState)} key={toastState.id} />
diff --git a/packages/components/src/components/tooltip/component.tsx b/packages/components/src/components/tooltip/component.tsx
index 9f83dc4a71..f3fa110454 100644
--- a/packages/components/src/components/tooltip/component.tsx
+++ b/packages/components/src/components/tooltip/component.tsx
@@ -6,7 +6,7 @@ import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import { alignFloatingElements } from '../../utils/align-floating-elements';
 import { hideOverlay, showOverlay } from '../../utils/overlay';
-import { KolSpanWc } from '../../core/component-names';
+import { KolSpanWcTag } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-tooltip-wc',
@@ -127,7 +127,7 @@ export class KolTooltip implements TooltipAPI {
 				{this.state._label !== '' && (
 					<div class="tooltip-floating" ref={this.catchTooltipElement}>
 						<div class="tooltip-area tooltip-arrow" ref={this.catchArrowElement} />
-						<KolSpanWc class="tooltip-area tooltip-content" id={this.state._id} _accessKey={this._accessKey} _label={this.state._label}></KolSpanWc>
+						<KolSpanWcTag class="tooltip-area tooltip-content" id={this.state._id} _accessKey={this._accessKey} _label={this.state._label}></KolSpanWcTag>
 					</div>
 				)}
 			</Host>
diff --git a/packages/components/src/components/tree-item/component.tsx b/packages/components/src/components/tree-item/component.tsx
index 31a4b268b6..ef88578a4c 100644
--- a/packages/components/src/components/tree-item/component.tsx
+++ b/packages/components/src/components/tree-item/component.tsx
@@ -2,7 +2,7 @@ import { Component, Element, h, Host, type JSX, Method, Prop, State, Watch } fro
 
 import type { ActivePropType, HrefPropType, LabelPropType, OpenPropType, TreeItemAPI, TreeItemStates } from '@public-ui/schema';
 import { validateActive, validateHref, validateLabel, validateOpen } from '@public-ui/schema';
-import { KolLink } from '../../core/component-names';
+import { KolLinkTag } from '../../core/component-names';
 
 @Component({
 	tag: `kol-tree-item-wc`,
@@ -17,7 +17,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 		return (
 			<Host onSlotchange={this.handleSlotchange.bind(this)}>
 				<li class="tree-item">
-					<KolLink
+					<KolLinkTag
 						class={{
 							'tree-link': true,
 							active: Boolean(this.state._active),
@@ -42,7 +42,7 @@ export class KolTreeItemWc implements TreeItemAPI {
 								))}{' '}
 							{this.state._label}
 						</span>
-					</KolLink>
+					</KolLinkTag>
 					<ul hidden={!this.state._hasChildren || !this.state._open} role="group">
 						<slot />
 					</ul>
diff --git a/packages/components/src/components/tree-item/shadow.tsx b/packages/components/src/components/tree-item/shadow.tsx
index 43f904556a..d2911a41d4 100644
--- a/packages/components/src/components/tree-item/shadow.tsx
+++ b/packages/components/src/components/tree-item/shadow.tsx
@@ -1,7 +1,7 @@
 import { Component, h, type JSX, Method, Prop } from '@stencil/core';
 
 import type { HrefPropType, LabelPropType, OpenPropType, TreeItemProps } from '@public-ui/schema';
-import { KolTreeItemWc } from '../../core/component-names';
+import { KolTreeItemWcTag } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-tree-item', // keep in sync with `const TREE_ITEM_TAG_NAME`
@@ -57,7 +57,7 @@ export class KolTreeItem implements TreeItemProps {
 
 	public render(): JSX.Element {
 		return (
-			<KolTreeItemWc
+			<KolTreeItemWcTag
 				_active={this._active}
 				_label={this._label}
 				_open={this._open}
@@ -65,7 +65,7 @@ export class KolTreeItem implements TreeItemProps {
 				ref={(element?: HTMLKolTreeItemWcElement) => (this.element = element)}
 			>
 				<slot />
-			</KolTreeItemWc>
+			</KolTreeItemWcTag>
 		);
 	}
 }
diff --git a/packages/components/src/components/tree/shadow.tsx b/packages/components/src/components/tree/shadow.tsx
index 5706fbf86b..816ad25a3e 100644
--- a/packages/components/src/components/tree/shadow.tsx
+++ b/packages/components/src/components/tree/shadow.tsx
@@ -2,7 +2,7 @@ import type { JSX } from '@stencil/core';
 import { Component, h, Prop } from '@stencil/core';
 
 import type { LabelPropType, TreeProps } from '@public-ui/schema';
-import { KolTreeWc } from '../../core/component-names';
+import { KolTreeWcTag } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-tree',
@@ -19,9 +19,9 @@ export class KolTree implements TreeProps {
 
 	public render(): JSX.Element {
 		return (
-			<KolTreeWc _label={this._label}>
+			<KolTreeWcTag _label={this._label}>
 				<slot />
-			</KolTreeWc>
+			</KolTreeWcTag>
 		);
 	}
 }
diff --git a/packages/components/src/components/version/component.tsx b/packages/components/src/components/version/component.tsx
index f774786dd9..873d32d37c 100644
--- a/packages/components/src/components/version/component.tsx
+++ b/packages/components/src/components/version/component.tsx
@@ -5,7 +5,7 @@ import { Component, h, Prop, State, Watch } from '@stencil/core';
 import { translate } from '../../i18n';
 
 import type { JSX } from '@stencil/core';
-import { KolBadge } from '../../core/component-names';
+import { KolBadgeTag } from '../../core/component-names';
 
 @Component({
 	tag: 'kol-version',
@@ -17,7 +17,7 @@ import { KolBadge } from '../../core/component-names';
 export class KolVersion implements VersionAPI {
 	public render(): JSX.Element {
 		return (
-			<KolBadge
+			<KolBadgeTag
 				_color="#bec5c9"
 				_icons={{
 					left: { icon: 'codicon codicon-versions', label: translate('kol-version') },
diff --git a/packages/components/src/core/component-names.ts b/packages/components/src/core/component-names.ts
index 28fe6bea43..f78cbe8061 100644
--- a/packages/components/src/core/component-names.ts
+++ b/packages/components/src/core/component-names.ts
@@ -1,125 +1,125 @@
-export let KolAbbr = 'kol-abbr' as const;
-export let KolAccordion = 'kol-accordion' as const;
-export let KolAlert = 'kol-alert' as const;
-export let KolAlertWc = 'kol-alert-wc' as const;
-export let KolAvatar = 'kol-avatar' as const;
-export let KolAvatarWc = 'kol-avatar-wc' as const;
-export let KolBadge = 'kol-badge' as const;
-export let KolBreadcrumb = 'kol-breadcrumb' as const;
-export let KolButton = 'kol-button' as const;
-export let KolButtonWc = 'kol-button-wc' as const;
-export let KolButtonGroup = 'kol-button-group' as const;
-export let KolButtonGroupWc = 'kol-button-group-wc' as const;
-export let KolButtonLink = 'kol-button-link' as const;
-export let KolCard = 'kol-card' as const;
-export let KolDetails = 'kol-details' as const;
-export let KolForm = 'kol-form' as const;
-export let KolHeading = 'kol-heading' as const;
-export let KolHeadingWc = 'kol-heading-wc' as const;
-export let KolIcon = 'kol-icon' as const;
-export let KolImage = 'kol-image' as const;
-export let KolIndentedText = 'kol-indented-text' as const;
-export let KolInput = 'kol-input' as const;
-export let KolInputCheckbox = 'kol-input-checkbox' as const;
-export let KolInputColor = 'kol-input-color' as const;
-export let KolInputDate = 'kol-input-date' as const;
-export let KolInputEmail = 'kol-input-email' as const;
-export let KolInputFile = 'kol-input-file' as const;
-export let KolInputNumber = 'kol-input-number' as const;
-export let KolInputPassword = 'kol-input-password' as const;
-export let KolInputRadio = 'kol-input-radio' as const;
-export let KolInputRange = 'kol-input-range' as const;
-export let KolInputText = 'kol-input-text' as const;
-export let KolKolibri = 'kol-kolibri' as const;
-export let KolLink = 'kol-link' as const;
-export let KolLinkWc = 'kol-link-wc' as const;
-export let KolLinkButton = 'kol-link-button' as const;
-export let KolLinkGroup = 'kol-link-group' as const;
-export let KolLogo = 'kol-logo' as const;
-export let KolModal = 'kol-modal' as const;
-export let KolNav = 'kol-nav' as const;
-export let KolPagination = 'kol-pagination' as const;
-export let KolPopoverWc = 'kol-popover-wc' as const;
-export let KolProgress = 'kol-progress' as const;
-export let KolQuote = 'kol-quote' as const;
-export let KolSelect = 'kol-select' as const;
-export let KolSkipNav = 'kol-skip-nav' as const;
-export let KolSpan = 'kol-span' as const;
-export let KolSpanWc = 'kol-span-wc' as const;
-export let KolSpin = 'kol-spin' as const;
-export let KolSplitButton = 'kol-split-button' as const;
-export let KolSymbol = 'kol-symbol' as const;
-export let KolTable = 'kol-table' as const;
-export let KolTabs = 'kol-tabs' as const;
-export let KolTextarea = 'kol-textarea' as const;
-export let KolToastContainer = 'kol-toast-container' as const;
-export let KolTooltipWc = 'kol-tooltip-wc' as const;
-export let KolTree = 'kol-tree' as const;
-export let KolTreeItem = 'kol-tree-item' as const;
-export let KolTreeItemWc = 'kol-tree-item-wc' as const;
-export let KolTreeWc = 'kol-tree-wc' as const;
-export let KolVersion = 'kol-version' as const;
+export let KolAbbrTag = 'kol-abbr' as const;
+export let KolAccordionTag = 'kol-accordion' as const;
+export let KolAlertTag = 'kol-alert' as const;
+export let KolAlertWcTag = 'kol-alert-wc' as const;
+export let KolAvatarTag = 'kol-avatar' as const;
+export let KolAvatarWcTag = 'kol-avatar-wc' as const;
+export let KolBadgeTag = 'kol-badge' as const;
+export let KolBreadcrumbTag = 'kol-breadcrumb' as const;
+export let KolButtonTag = 'kol-button' as const;
+export let KolButtonWcTag = 'kol-button-wc' as const;
+export let KolButtonGroupTag = 'kol-button-group' as const;
+export let KolButtonGroupWcTag = 'kol-button-group-wc' as const;
+export let KolButtonLinkTag = 'kol-button-link' as const;
+export let KolCardTag = 'kol-card' as const;
+export let KolDetailsTag = 'kol-details' as const;
+export let KolFormTag = 'kol-form' as const;
+export let KolHeadingTag = 'kol-heading' as const;
+export let KolHeadingWcTag = 'kol-heading-wc' as const;
+export let KolIconTag = 'kol-icon' as const;
+export let KolImageTag = 'kol-image' as const;
+export let KolIndentedTextTag = 'kol-indented-text' as const;
+export let KolInputTag = 'kol-input' as const;
+export let KolInputCheckboxTag = 'kol-input-checkbox' as const;
+export let KolInputColorTag = 'kol-input-color' as const;
+export let KolInputDateTag = 'kol-input-date' as const;
+export let KolInputEmailTag = 'kol-input-email' as const;
+export let KolInputFileTag = 'kol-input-file' as const;
+export let KolInputNumberTag = 'kol-input-number' as const;
+export let KolInputPasswordTag = 'kol-input-password' as const;
+export let KolInputRadioTag = 'kol-input-radio' as const;
+export let KolInputRangeTag = 'kol-input-range' as const;
+export let KolInputTextTag = 'kol-input-text' as const;
+export let KolKolibriTag = 'kol-kolibri' as const;
+export let KolLinkTag = 'kol-link' as const;
+export let KolLinkWcTag = 'kol-link-wc' as const;
+export let KolLinkButtonTag = 'kol-link-button' as const;
+export let KolLinkGroupTag = 'kol-link-group' as const;
+export let KolLogoTag = 'kol-logo' as const;
+export let KolModalTag = 'kol-modal' as const;
+export let KolNavTag = 'kol-nav' as const;
+export let KolPaginationTag = 'kol-pagination' as const;
+export let KolPopoverWcTag = 'kol-popover-wc' as const;
+export let KolProgressTag = 'kol-progress' as const;
+export let KolQuoteTag = 'kol-quote' as const;
+export let KolSelectTag = 'kol-select' as const;
+export let KolSkipNavTag = 'kol-skip-nav' as const;
+export let KolSpanTag = 'kol-span' as const;
+export let KolSpanWcTag = 'kol-span-wc' as const;
+export let KolSpinTag = 'kol-spin' as const;
+export let KolSplitButtonTag = 'kol-split-button' as const;
+export let KolSymbolTag = 'kol-symbol' as const;
+export let KolTableTag = 'kol-table' as const;
+export let KolTabsTag = 'kol-tabs' as const;
+export let KolTextareaTag = 'kol-textarea' as const;
+export let KolToastContainerTag = 'kol-toast-container' as const;
+export let KolTooltipWcTag = 'kol-tooltip-wc' as const;
+export let KolTreeTag = 'kol-tree' as const;
+export let KolTreeItemTag = 'kol-tree-item' as const;
+export let KolTreeItemWcTag = 'kol-tree-item-wc' as const;
+export let KolTreeWcTag = 'kol-tree-wc' as const;
+export let KolVersionTag = 'kol-version' as const;
 
 export const setCustomTagNames = (transformTagName: (tagName: string) => string) => {
-	KolAbbr = transformTagName(KolAbbr as string) as 'kol-abbr';
-	KolAccordion = transformTagName(KolAccordion as string) as 'kol-accordion';
-	KolAlert = transformTagName(KolAlert as string) as 'kol-alert';
-	KolAlertWc = transformTagName(KolAlertWc as string) as 'kol-alert-wc';
-	KolAvatar = transformTagName(KolAvatar as string) as 'kol-avatar';
-	KolAvatarWc = transformTagName(KolAvatarWc as string) as 'kol-avatar-wc';
-	KolBadge = transformTagName(KolBadge as string) as 'kol-badge';
-	KolBreadcrumb = transformTagName(KolBreadcrumb as string) as 'kol-breadcrumb';
-	KolButton = transformTagName(KolButton as string) as 'kol-button';
-	KolButtonWc = transformTagName(KolButtonWc as string) as 'kol-button-wc';
-	KolButtonGroup = transformTagName(KolButtonGroup as string) as 'kol-button-group';
-	KolButtonGroupWc = transformTagName(KolButtonGroupWc as string) as 'kol-button-group-wc';
-	KolButtonLink = transformTagName(KolButtonLink as string) as 'kol-button-link';
-	KolCard = transformTagName(KolCard as string) as 'kol-card';
-	KolDetails = transformTagName(KolDetails as string) as 'kol-details';
-	KolForm = transformTagName(KolForm as string) as 'kol-form';
-	KolHeading = transformTagName(KolHeading as string) as 'kol-heading';
-	KolHeadingWc = transformTagName(KolHeadingWc as string) as 'kol-heading-wc';
-	KolIcon = transformTagName(KolIcon as string) as 'kol-icon';
-	KolImage = transformTagName(KolImage as string) as 'kol-image';
-	KolIndentedText = transformTagName(KolIndentedText as string) as 'kol-indented-text';
-	KolInput = transformTagName(KolInput as string) as 'kol-input';
-	KolInputCheckbox = transformTagName(KolInputCheckbox as string) as 'kol-input-checkbox';
-	KolInputColor = transformTagName(KolInputColor as string) as 'kol-input-color';
-	KolInputDate = transformTagName(KolInputDate as string) as 'kol-input-date';
-	KolInputEmail = transformTagName(KolInputEmail as string) as 'kol-input-email';
-	KolInputFile = transformTagName(KolInputFile as string) as 'kol-input-file';
-	KolInputNumber = transformTagName(KolInputNumber as string) as 'kol-input-number';
-	KolInputPassword = transformTagName(KolInputPassword as string) as 'kol-input-password';
-	KolInputRadio = transformTagName(KolInputRadio as string) as 'kol-input-radio';
-	KolInputRange = transformTagName(KolInputRange as string) as 'kol-input-range';
-	KolInputText = transformTagName(KolInputText as string) as 'kol-input-text';
-	KolKolibri = transformTagName(KolKolibri as string) as 'kol-kolibri';
-	KolLink = transformTagName(KolLink as string) as 'kol-link';
-	KolLinkWc = transformTagName(KolLinkWc as string) as 'kol-link-wc';
-	KolLinkButton = transformTagName(KolLinkButton as string) as 'kol-link-button';
-	KolLinkGroup = transformTagName(KolLinkGroup as string) as 'kol-link-group';
-	KolLogo = transformTagName(KolLogo as string) as 'kol-logo';
-	KolModal = transformTagName(KolModal as string) as 'kol-modal';
-	KolNav = transformTagName(KolNav as string) as 'kol-nav';
-	KolPagination = transformTagName(KolPagination as string) as 'kol-pagination';
-	KolPopoverWc = transformTagName(KolPopoverWc as string) as 'kol-popover-wc';
-	KolProgress = transformTagName(KolProgress as string) as 'kol-progress';
-	KolQuote = transformTagName(KolQuote as string) as 'kol-quote';
-	KolSelect = transformTagName(KolSelect as string) as 'kol-select';
-	KolSkipNav = transformTagName(KolSkipNav as string) as 'kol-skip-nav';
-	KolSpan = transformTagName(KolSpan as string) as 'kol-span';
-	KolSpanWc = transformTagName(KolSpanWc as string) as 'kol-span-wc';
-	KolSpin = transformTagName(KolSpin as string) as 'kol-spin';
-	KolSplitButton = transformTagName(KolSplitButton as string) as 'kol-split-button';
-	KolSymbol = transformTagName(KolSymbol as string) as 'kol-symbol';
-	KolTable = transformTagName(KolTable as string) as 'kol-table';
-	KolTabs = transformTagName(KolTabs as string) as 'kol-tabs';
-	KolTextarea = transformTagName(KolTextarea as string) as 'kol-textarea';
-	KolToastContainer = transformTagName(KolToastContainer as string) as 'kol-toast-container';
-	KolTooltipWc = transformTagName(KolTooltipWc as string) as 'kol-tooltip-wc';
-	KolTree = transformTagName(KolTree as string) as 'kol-tree';
-	KolTreeItem = transformTagName(KolTreeItem as string) as 'kol-tree-item';
-	KolTreeItemWc = transformTagName(KolTreeItemWc as string) as 'kol-tree-item-wc';
-	KolTreeWc = transformTagName(KolTreeWc as string) as 'kol-tree-wc';
-	KolVersion = transformTagName(KolVersion as string) as 'kol-version';
+	KolAbbrTag = transformTagName(KolAbbrTag as string) as 'kol-abbr';
+	KolAccordionTag = transformTagName(KolAccordionTag as string) as 'kol-accordion';
+	KolAlertTag = transformTagName(KolAlertTag as string) as 'kol-alert';
+	KolAlertWcTag = transformTagName(KolAlertWcTag as string) as 'kol-alert-wc';
+	KolAvatarTag = transformTagName(KolAvatarTag as string) as 'kol-avatar';
+	KolAvatarWcTag = transformTagName(KolAvatarWcTag as string) as 'kol-avatar-wc';
+	KolBadgeTag = transformTagName(KolBadgeTag as string) as 'kol-badge';
+	KolBreadcrumbTag = transformTagName(KolBreadcrumbTag as string) as 'kol-breadcrumb';
+	KolButtonTag = transformTagName(KolButtonTag as string) as 'kol-button';
+	KolButtonWcTag = transformTagName(KolButtonWcTag as string) as 'kol-button-wc';
+	KolButtonGroupTag = transformTagName(KolButtonGroupTag as string) as 'kol-button-group';
+	KolButtonGroupWcTag = transformTagName(KolButtonGroupWcTag as string) as 'kol-button-group-wc';
+	KolButtonLinkTag = transformTagName(KolButtonLinkTag as string) as 'kol-button-link';
+	KolCardTag = transformTagName(KolCardTag as string) as 'kol-card';
+	KolDetailsTag = transformTagName(KolDetailsTag as string) as 'kol-details';
+	KolFormTag = transformTagName(KolFormTag as string) as 'kol-form';
+	KolHeadingTag = transformTagName(KolHeadingTag as string) as 'kol-heading';
+	KolHeadingWcTag = transformTagName(KolHeadingWcTag as string) as 'kol-heading-wc';
+	KolIconTag = transformTagName(KolIconTag as string) as 'kol-icon';
+	KolImageTag = transformTagName(KolImageTag as string) as 'kol-image';
+	KolIndentedTextTag = transformTagName(KolIndentedTextTag as string) as 'kol-indented-text';
+	KolInputTag = transformTagName(KolInputTag as string) as 'kol-input';
+	KolInputCheckboxTag = transformTagName(KolInputCheckboxTag as string) as 'kol-input-checkbox';
+	KolInputColorTag = transformTagName(KolInputColorTag as string) as 'kol-input-color';
+	KolInputDateTag = transformTagName(KolInputDateTag as string) as 'kol-input-date';
+	KolInputEmailTag = transformTagName(KolInputEmailTag as string) as 'kol-input-email';
+	KolInputFileTag = transformTagName(KolInputFileTag as string) as 'kol-input-file';
+	KolInputNumberTag = transformTagName(KolInputNumberTag as string) as 'kol-input-number';
+	KolInputPasswordTag = transformTagName(KolInputPasswordTag as string) as 'kol-input-password';
+	KolInputRadioTag = transformTagName(KolInputRadioTag as string) as 'kol-input-radio';
+	KolInputRangeTag = transformTagName(KolInputRangeTag as string) as 'kol-input-range';
+	KolInputTextTag = transformTagName(KolInputTextTag as string) as 'kol-input-text';
+	KolKolibriTag = transformTagName(KolKolibriTag as string) as 'kol-kolibri';
+	KolLinkTag = transformTagName(KolLinkTag as string) as 'kol-link';
+	KolLinkWcTag = transformTagName(KolLinkWcTag as string) as 'kol-link-wc';
+	KolLinkButtonTag = transformTagName(KolLinkButtonTag as string) as 'kol-link-button';
+	KolLinkGroupTag = transformTagName(KolLinkGroupTag as string) as 'kol-link-group';
+	KolLogoTag = transformTagName(KolLogoTag as string) as 'kol-logo';
+	KolModalTag = transformTagName(KolModalTag as string) as 'kol-modal';
+	KolNavTag = transformTagName(KolNavTag as string) as 'kol-nav';
+	KolPaginationTag = transformTagName(KolPaginationTag as string) as 'kol-pagination';
+	KolPopoverWcTag = transformTagName(KolPopoverWcTag as string) as 'kol-popover-wc';
+	KolProgressTag = transformTagName(KolProgressTag as string) as 'kol-progress';
+	KolQuoteTag = transformTagName(KolQuoteTag as string) as 'kol-quote';
+	KolSelectTag = transformTagName(KolSelectTag as string) as 'kol-select';
+	KolSkipNavTag = transformTagName(KolSkipNavTag as string) as 'kol-skip-nav';
+	KolSpanTag = transformTagName(KolSpanTag as string) as 'kol-span';
+	KolSpanWcTag = transformTagName(KolSpanWcTag as string) as 'kol-span-wc';
+	KolSpinTag = transformTagName(KolSpinTag as string) as 'kol-spin';
+	KolSplitButtonTag = transformTagName(KolSplitButtonTag as string) as 'kol-split-button';
+	KolSymbolTag = transformTagName(KolSymbolTag as string) as 'kol-symbol';
+	KolTableTag = transformTagName(KolTableTag as string) as 'kol-table';
+	KolTabsTag = transformTagName(KolTabsTag as string) as 'kol-tabs';
+	KolTextareaTag = transformTagName(KolTextareaTag as string) as 'kol-textarea';
+	KolToastContainerTag = transformTagName(KolToastContainerTag as string) as 'kol-toast-container';
+	KolTooltipWcTag = transformTagName(KolTooltipWcTag as string) as 'kol-tooltip-wc';
+	KolTreeTag = transformTagName(KolTreeTag as string) as 'kol-tree';
+	KolTreeItemTag = transformTagName(KolTreeItemTag as string) as 'kol-tree-item';
+	KolTreeItemWcTag = transformTagName(KolTreeItemWcTag as string) as 'kol-tree-item-wc';
+	KolTreeWcTag = transformTagName(KolTreeWcTag as string) as 'kol-tree-wc';
+	KolVersionTag = transformTagName(KolVersionTag as string) as 'kol-version';
 };

From cfead25c465a8790d422d1eec766a36d7123bfe4 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 4 Mar 2024 11:09:28 +0100
Subject: [PATCH 16/24] Update adapter imports

---
 packages/components/stencil.config.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/stencil.config.ts b/packages/components/stencil.config.ts
index df0953e3de..9e45864484 100644
--- a/packages/components/stencil.config.ts
+++ b/packages/components/stencil.config.ts
@@ -1,14 +1,14 @@
 import fs, { promises as fsPromises } from 'fs';
 import path from 'path';
 
-import { angularOutputTarget } from '@stencil/angular-output-target';
+import { angularOutputTarget } from '@public-ui/stencil-angular-output-target';
 import { Config } from '@stencil/core';
 import { JsonDocs, OutputTarget } from '@stencil/core/internal';
 import { postcss } from '@stencil/postcss';
 import { sass } from '@stencil/sass';
-import { reactOutputTarget } from 'sdvg-react-output-target';
-import { solidOutputTarget } from '@stencil/solid-output-target';
-import { vueOutputTarget } from '@stencil/vue-output-target';
+import { reactOutputTarget } from '@public-ui/stencil-react-output-target';
+import { solidOutputTarget } from '@public-ui/stencil-solid-output-target';
+import { vueOutputTarget } from '@public-ui/stencil-vue-output-target';
 
 const TAGS = [
 	'kol-abbr',

From f0b50584b56141332f632ae74afc1f08a6505de1 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 4 Mar 2024 17:51:12 +0100
Subject: [PATCH 17/24] Call setCustomTagNames

---
 packages/components/src/core/bootstrap.ts | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/core/bootstrap.ts b/packages/components/src/core/bootstrap.ts
index 30d8123b8a..704281d9b7 100644
--- a/packages/components/src/core/bootstrap.ts
+++ b/packages/components/src/core/bootstrap.ts
@@ -1,6 +1,7 @@
 import type { Generic, LoaderCallback, RegisterOptions } from 'adopted-style-sheets';
 import { register as coreRegister } from 'adopted-style-sheets';
 import { configI18n, initI18n } from './i18n';
+import { setCustomTagNames } from './component-names';
 
 type KoliBriOptions = RegisterOptions & {
 	// transformTagName?: (tagName: string) => string;
@@ -16,7 +17,9 @@ export const bootstrap = async (
 ): Promise<void[]> => {
 	await initI18n(options?.translation?.name);
 	await configI18n(options?.translation?.name ?? 'de', options?.translations);
-	// configTransformTagName(options.transformTagName);
+	if (options?.transformTagName) {
+		setCustomTagNames(options?.transformTagName);
+	}
 	return await coreRegister(themes, loaders, options);
 };
 

From 2cd719b43519a2c5a33f990e37716b8855f994b4 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 4 Mar 2024 17:51:21 +0100
Subject: [PATCH 18/24] Remove multi-instance warning

---
 packages/components/src/utils/dev.utils.ts | 30 ++++++++++------------
 1 file changed, 13 insertions(+), 17 deletions(-)

diff --git a/packages/components/src/utils/dev.utils.ts b/packages/components/src/utils/dev.utils.ts
index 4f18d7d43b..8f5b6d19c1 100644
--- a/packages/components/src/utils/dev.utils.ts
+++ b/packages/components/src/utils/dev.utils.ts
@@ -30,23 +30,19 @@ export { getKoliBri };
 
 export const initKoliBri = (): void => {
 	initMeta();
-	if (getKoliBri() === undefined) {
-		Log.debug(
-			`
-	,--. ,--.         ,--. ,--. ,-----.           ,--.
-	|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'
-	|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
-	|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
-	\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-	🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.8
-		`,
-			{
-				forceLog: true,
-			}
-		);
-	} else {
-		console.warn(`You can only initialize KoliBri once.`);
-	}
+	Log.debug(
+		`
+,--. ,--.         ,--. ,--. ,-----.           ,--.
+|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'
+|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
+|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
+\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
+🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | 2.0.8
+	`,
+		{
+			forceLog: true,
+		}
+	);
 };
 
 export const renderDevAdvice = (): void => {

From e8fec65af8e90446fff513ead37a270d38b6fd28 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Wed, 6 Mar 2024 12:18:36 +0100
Subject: [PATCH 19/24] Fix/extend Angular module generation

---
 packages/adapters/angular/v17/ng-module.js | 24 ++++++++--------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/adapters/angular/v17/ng-module.js b/packages/adapters/angular/v17/ng-module.js
index b85a0a6cca..0cd3076136 100644
--- a/packages/adapters/angular/v17/ng-module.js
+++ b/packages/adapters/angular/v17/ng-module.js
@@ -1,16 +1,7 @@
 const fs = require('fs');
-const path = require('path');
-
-let ngComponents = fs.readFileSync('./src/components.ts', 'utf-8');
-// ngFile = ngFile.replace(/, NgModule/g, '');
-// ngFile = ngFile.replace(/\/\* AutoGen NgModule(.*\n?)*/, '');
-
-const componentList = ngComponents.split('export class');
-componentList.splice(0, 1);
-componentList.forEach((component, index) => {
-	componentList[index] = component.replace(/ \{(.*\n?)*/, '').trim();
-});
 
+const componentFileContents = fs.readFileSync('./src/components.ts', 'utf-8');
+const componentList = [...componentFileContents.matchAll(/export class ([^ ]+)/g)].map((group) => group[1]);
 const componentListStr = componentList.join(', ');
 
 fs.writeFileSync(
@@ -18,15 +9,18 @@ fs.writeFileSync(
 	`
 /* AutoGen NgModule */
 
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ${componentListStr} } from './components';
-export { ${componentListStr} }
+import { ReplaceTagDirective } from './angular-component-lib/ReplaceTagDirective';
+
 
 @NgModule({
-  declarations: [${componentListStr}],
+  declarations: [ReplaceTagDirective, ${componentListStr}],
   exports: [${componentListStr}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class KoliBriModule {}
+export { ${componentListStr} }
 `,
-	'utf-8'
+	'utf-8',
 );

From 125ff630ca7382aa9922e12d1d85380fb19c82d0 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Thu, 7 Mar 2024 10:36:25 +0100
Subject: [PATCH 20/24] Update readmes

---
 packages/components/src/components/badge/readme.md          | 2 +-
 packages/components/src/components/input-color/readme.md    | 2 +-
 packages/components/src/components/input-date/readme.md     | 2 +-
 packages/components/src/components/input-email/readme.md    | 2 +-
 packages/components/src/components/input-file/readme.md     | 2 +-
 packages/components/src/components/input-number/readme.md   | 2 +-
 packages/components/src/components/input-password/readme.md | 2 +-
 packages/components/src/components/input-text/readme.md     | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md
index cc4bed1640..434cea86f5 100644
--- a/packages/components/src/components/badge/readme.md
+++ b/packages/components/src/components/badge/readme.md
@@ -104,7 +104,7 @@ Die zusätzliche Ausgabe eines **Icon** gewährleistet, dass der Nutzer auch hie
 | `_color`              | `_color`        | Defines the backgroundColor and foregroundColor.                                                                   | `string \| undefined \| { backgroundColor: string; foregroundColor: Stringified<CharacteristicColors>; }`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `'#000'`    |
 | `_icons`              | `_icons`        | Defines the icon classnames (e.g. `_icons="fa-solid fa-user"`).                                                    | `KoliBriHorizontalIcons & KoliBriVerticalIcons \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `undefined` |
 | `_label` _(required)_ | `_label`        | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (\_hide-label only).                            | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "ghost" \| "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button` | Allows to add a button with an arbitrary action within the element (\_hide-label only).                            | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
 
 ## Dependencies
 
diff --git a/packages/components/src/components/input-color/readme.md b/packages/components/src/components/input-color/readme.md
index 591c0d8c8e..cd71d5fae9 100644
--- a/packages/components/src/components/input-color/readme.md
+++ b/packages/components/src/components/input-color/readme.md
@@ -62,7 +62,7 @@ Für eine vollständige Barrierefreiheit prüfen Sie die Verwendung einer vorgef
 | `_label` _(required)_ | `_label`         | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot. | `string`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
-| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "ghost" \| "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
 | `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'top'`     |
diff --git a/packages/components/src/components/input-date/readme.md b/packages/components/src/components/input-date/readme.md
index bbec29f153..e418287717 100644
--- a/packages/components/src/components/input-date/readme.md
+++ b/packages/components/src/components/input-date/readme.md
@@ -95,7 +95,7 @@ Das Eingabefeld für Zeitangaben gibt es in unterschiedlichen Ausprägungen (Dat
 | `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
-| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "ghost" \| "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
 | `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                     | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
diff --git a/packages/components/src/components/input-email/readme.md b/packages/components/src/components/input-email/readme.md
index b27151f4cb..1aa52135d2 100644
--- a/packages/components/src/components/input-email/readme.md
+++ b/packages/components/src/components/input-email/readme.md
@@ -66,7 +66,7 @@ Um eine fehlgeschlagene Validierung anzuzeigen, setzen Sie das Attrbut **`_error
 | `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
-| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "ghost" \| "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
 | `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'top'`     |
diff --git a/packages/components/src/components/input-file/readme.md b/packages/components/src/components/input-file/readme.md
index 55be950725..7e04a7b8d5 100644
--- a/packages/components/src/components/input-file/readme.md
+++ b/packages/components/src/components/input-file/readme.md
@@ -58,7 +58,7 @@ Mögliche Werte und weitere Informationen erhalten Sie im <kol-link _href="https
 | `_name`               | `_name`          | Defines the technical name of an input field.                                                                                                                | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_on`                 | --               | Gibt die EventCallback-Funktionen für das Input-Event an.                                                                                                    | `InputTypeOnBlur & InputTypeOnClick & InputTypeOnChange & InputTypeOnFocus \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
-| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "ghost" \| "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'top'`     |
 | `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
diff --git a/packages/components/src/components/input-number/readme.md b/packages/components/src/components/input-number/readme.md
index 1fec7d9f15..fdc4303036 100644
--- a/packages/components/src/components/input-number/readme.md
+++ b/packages/components/src/components/input-number/readme.md
@@ -55,7 +55,7 @@ Der Input-Typ **Number** erzeugt ein Eingabefeld für Zahlen.
 | `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
-| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "ghost" \| "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
 | `_step`               | `_step`          | Defines the step size for value changes.                                                                                                                     | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
diff --git a/packages/components/src/components/input-password/readme.md b/packages/components/src/components/input-password/readme.md
index 09153e9214..77925a0876 100644
--- a/packages/components/src/components/input-password/readme.md
+++ b/packages/components/src/components/input-password/readme.md
@@ -57,7 +57,7 @@ Der Input-Typ **Password** erzeugt ein Eingabefeld für Passwörter. Die Eingabe
 | `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
-| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "ghost" \| "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'top'`     |
 | `_touched`            | `_touched`       | Shows if the input was touched by a user.                                                                                                                    | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
diff --git a/packages/components/src/components/input-text/readme.md b/packages/components/src/components/input-text/readme.md
index d03864fac6..a180c1a0db 100644
--- a/packages/components/src/components/input-text/readme.md
+++ b/packages/components/src/components/input-text/readme.md
@@ -76,7 +76,7 @@ Der Input-Typ **Text** erzeugt ein Eingabefeld für normalen Text, Suchbegriffe,
 | `_placeholder`        | `_placeholder`   | Defines the placeholder for input field. To be shown when there's no value.                                                                                  | `string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_readOnly`           | `_read-only`     | Makes the input element read only.                                                                                                                           | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
 | `_required`           | `_required`      | Makes the input element required.                                                                                                                            | `boolean \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | `false`     |
-| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "ghost" \| "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
+| `_smartButton`        | `_smart-button`  | Allows to add a button with an arbitrary action within the element (\_hide-label only).                                                                      | `string \| undefined \| { _label: string; } & { _tabIndex?: number \| undefined; _value?: Stringified<StencilUnknown>; _role?: AlternativeButtonLinkRolePropType \| undefined; _ariaControls?: string \| undefined; _ariaExpanded?: boolean \| undefined; _ariaSelected?: boolean \| undefined; _on?: ButtonCallbacksPropType<StencilUnknown> \| undefined; _type?: "button" \| "reset" \| "submit" \| undefined; _variant?: "primary" \| "secondary" \| "normal" \| "tertiary" \| "danger" \| "ghost" \| "custom" \| undefined; _customClass?: string \| undefined; _disabled?: boolean \| undefined; _hideLabel?: boolean \| undefined; _icons?: IconsPropType \| undefined; _id?: string \| undefined; _name?: string \| undefined; _syncValueBySelector?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; _accessKey?: string \| undefined; }` | `undefined` |
 | `_suggestions`        | `_suggestions`   | Suggestions to provide for the input.                                                                                                                        | `W3CInputValue[] \| string \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | `undefined` |
 | `_tabIndex`           | `_tab-index`     | Defines which tab-index the primary element of the component has. (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)             | `number \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `undefined` |
 | `_tooltipAlign`       | `_tooltip-align` | Defines where to show the Tooltip preferably: top, right, bottom or left.                                                                                    | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `'top'`     |

From 4d341274e1d3d3d3d4143f9ebc7ced09382a1f31 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Thu, 7 Mar 2024 10:36:39 +0100
Subject: [PATCH 21/24] Add missing import to angular module

---
 packages/adapters/angular/v17/ng-module.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/adapters/angular/v17/ng-module.js b/packages/adapters/angular/v17/ng-module.js
index 0cd3076136..a2030c5dc8 100644
--- a/packages/adapters/angular/v17/ng-module.js
+++ b/packages/adapters/angular/v17/ng-module.js
@@ -12,6 +12,7 @@ fs.writeFileSync(
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ${componentListStr} } from './components';
 import { ReplaceTagDirective } from './angular-component-lib/ReplaceTagDirective';
+export { setTagNameTransformer } from './angular-component-lib/tagNameTransformer';
 
 
 @NgModule({

From d853dfe8fc00e6a322a20b9af69069783adf8a9b Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Thu, 14 Mar 2024 16:07:29 +0100
Subject: [PATCH 22/24] Replace Stencil adapters with public-ui forked versions

---
 packages/adapters/angular/v11/ng-module.js    |  25 +--
 packages/adapters/angular/v11/package.json    |   1 +
 packages/adapters/angular/v12/ng-module.js    |  25 +--
 packages/adapters/angular/v12/package.json    |   1 +
 packages/adapters/angular/v13/ng-module.js    |  25 +--
 packages/adapters/angular/v13/package.json    |   1 +
 packages/adapters/angular/v14/ng-module.js    |  25 +--
 packages/adapters/angular/v14/package.json    |   1 +
 packages/adapters/angular/v15/ng-module.js    |  25 +--
 packages/adapters/angular/v15/package.json    |   1 +
 packages/adapters/angular/v16/ng-module.js    |  25 +--
 packages/adapters/angular/v16/package.json    |   1 +
 packages/adapters/angular/v17/package.json    |   1 +
 .../stencil-solid-output-target-0.0.1.tgz     | Bin 7008 -> 0 bytes
 packages/components/package.json              |   8 +-
 .../components/src/components/alert/readme.md |  15 --
 .../src/components/input-checkbox/readme.md   |  27 ---
 .../src/components/input-color/readme.md      |  25 ---
 .../src/components/input-date/readme.md       |  25 ---
 .../src/components/input-email/readme.md      |  25 ---
 .../src/components/input-file/readme.md       |  25 ---
 .../src/components/input-number/readme.md     |  25 ---
 .../src/components/input-password/readme.md   |  25 ---
 .../src/components/input-radio/readme.md      |  13 --
 .../src/components/input-range/readme.md      |  25 ---
 .../src/components/input-text/readme.md       |  25 ---
 .../src/components/pagination/readme.md       |  33 ---
 .../src/components/select/readme.md           |  30 ---
 .../components/src/components/table/readme.md |  33 ---
 .../src/components/textarea/readme.md         |  25 ---
 packages/components/src/utils/dev.utils.ts    |   2 +-
 pnpm-lock.yaml                                | 199 +++++++++++++-----
 32 files changed, 221 insertions(+), 521 deletions(-)
 delete mode 100644 packages/components/node_martin/stencil-solid-output-target-0.0.1.tgz

diff --git a/packages/adapters/angular/v11/ng-module.js b/packages/adapters/angular/v11/ng-module.js
index b85a0a6cca..a2030c5dc8 100644
--- a/packages/adapters/angular/v11/ng-module.js
+++ b/packages/adapters/angular/v11/ng-module.js
@@ -1,16 +1,7 @@
 const fs = require('fs');
-const path = require('path');
-
-let ngComponents = fs.readFileSync('./src/components.ts', 'utf-8');
-// ngFile = ngFile.replace(/, NgModule/g, '');
-// ngFile = ngFile.replace(/\/\* AutoGen NgModule(.*\n?)*/, '');
-
-const componentList = ngComponents.split('export class');
-componentList.splice(0, 1);
-componentList.forEach((component, index) => {
-	componentList[index] = component.replace(/ \{(.*\n?)*/, '').trim();
-});
 
+const componentFileContents = fs.readFileSync('./src/components.ts', 'utf-8');
+const componentList = [...componentFileContents.matchAll(/export class ([^ ]+)/g)].map((group) => group[1]);
 const componentListStr = componentList.join(', ');
 
 fs.writeFileSync(
@@ -18,15 +9,19 @@ fs.writeFileSync(
 	`
 /* AutoGen NgModule */
 
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ${componentListStr} } from './components';
-export { ${componentListStr} }
+import { ReplaceTagDirective } from './angular-component-lib/ReplaceTagDirective';
+export { setTagNameTransformer } from './angular-component-lib/tagNameTransformer';
+
 
 @NgModule({
-  declarations: [${componentListStr}],
+  declarations: [ReplaceTagDirective, ${componentListStr}],
   exports: [${componentListStr}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class KoliBriModule {}
+export { ${componentListStr} }
 `,
-	'utf-8'
+	'utf-8',
 );
diff --git a/packages/adapters/angular/v11/package.json b/packages/adapters/angular/v11/package.json
index 28f56a88a8..8c471cea13 100644
--- a/packages/adapters/angular/v11/package.json
+++ b/packages/adapters/angular/v11/package.json
@@ -63,6 +63,7 @@
 		"import": "./dist/index.js"
 	},
 	"devDependencies": {
+		"@angular/common": "11.2.14",
 		"@angular/compiler": "11.2.14",
 		"@angular/compiler-cli": "11.2.14",
 		"@angular/core": "11.2.14",
diff --git a/packages/adapters/angular/v12/ng-module.js b/packages/adapters/angular/v12/ng-module.js
index b85a0a6cca..a2030c5dc8 100644
--- a/packages/adapters/angular/v12/ng-module.js
+++ b/packages/adapters/angular/v12/ng-module.js
@@ -1,16 +1,7 @@
 const fs = require('fs');
-const path = require('path');
-
-let ngComponents = fs.readFileSync('./src/components.ts', 'utf-8');
-// ngFile = ngFile.replace(/, NgModule/g, '');
-// ngFile = ngFile.replace(/\/\* AutoGen NgModule(.*\n?)*/, '');
-
-const componentList = ngComponents.split('export class');
-componentList.splice(0, 1);
-componentList.forEach((component, index) => {
-	componentList[index] = component.replace(/ \{(.*\n?)*/, '').trim();
-});
 
+const componentFileContents = fs.readFileSync('./src/components.ts', 'utf-8');
+const componentList = [...componentFileContents.matchAll(/export class ([^ ]+)/g)].map((group) => group[1]);
 const componentListStr = componentList.join(', ');
 
 fs.writeFileSync(
@@ -18,15 +9,19 @@ fs.writeFileSync(
 	`
 /* AutoGen NgModule */
 
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ${componentListStr} } from './components';
-export { ${componentListStr} }
+import { ReplaceTagDirective } from './angular-component-lib/ReplaceTagDirective';
+export { setTagNameTransformer } from './angular-component-lib/tagNameTransformer';
+
 
 @NgModule({
-  declarations: [${componentListStr}],
+  declarations: [ReplaceTagDirective, ${componentListStr}],
   exports: [${componentListStr}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class KoliBriModule {}
+export { ${componentListStr} }
 `,
-	'utf-8'
+	'utf-8',
 );
diff --git a/packages/adapters/angular/v12/package.json b/packages/adapters/angular/v12/package.json
index 818aac5dd7..8934a95581 100644
--- a/packages/adapters/angular/v12/package.json
+++ b/packages/adapters/angular/v12/package.json
@@ -63,6 +63,7 @@
 		"import": "./dist/index.js"
 	},
 	"devDependencies": {
+		"@angular/common": "12.2.17",
 		"@angular/compiler": "12.2.17",
 		"@angular/compiler-cli": "12.2.17",
 		"@angular/core": "12.2.17",
diff --git a/packages/adapters/angular/v13/ng-module.js b/packages/adapters/angular/v13/ng-module.js
index b85a0a6cca..a2030c5dc8 100644
--- a/packages/adapters/angular/v13/ng-module.js
+++ b/packages/adapters/angular/v13/ng-module.js
@@ -1,16 +1,7 @@
 const fs = require('fs');
-const path = require('path');
-
-let ngComponents = fs.readFileSync('./src/components.ts', 'utf-8');
-// ngFile = ngFile.replace(/, NgModule/g, '');
-// ngFile = ngFile.replace(/\/\* AutoGen NgModule(.*\n?)*/, '');
-
-const componentList = ngComponents.split('export class');
-componentList.splice(0, 1);
-componentList.forEach((component, index) => {
-	componentList[index] = component.replace(/ \{(.*\n?)*/, '').trim();
-});
 
+const componentFileContents = fs.readFileSync('./src/components.ts', 'utf-8');
+const componentList = [...componentFileContents.matchAll(/export class ([^ ]+)/g)].map((group) => group[1]);
 const componentListStr = componentList.join(', ');
 
 fs.writeFileSync(
@@ -18,15 +9,19 @@ fs.writeFileSync(
 	`
 /* AutoGen NgModule */
 
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ${componentListStr} } from './components';
-export { ${componentListStr} }
+import { ReplaceTagDirective } from './angular-component-lib/ReplaceTagDirective';
+export { setTagNameTransformer } from './angular-component-lib/tagNameTransformer';
+
 
 @NgModule({
-  declarations: [${componentListStr}],
+  declarations: [ReplaceTagDirective, ${componentListStr}],
   exports: [${componentListStr}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class KoliBriModule {}
+export { ${componentListStr} }
 `,
-	'utf-8'
+	'utf-8',
 );
diff --git a/packages/adapters/angular/v13/package.json b/packages/adapters/angular/v13/package.json
index 462ba66b82..eefa3dd017 100644
--- a/packages/adapters/angular/v13/package.json
+++ b/packages/adapters/angular/v13/package.json
@@ -63,6 +63,7 @@
 		"import": "./dist/index.js"
 	},
 	"devDependencies": {
+		"@angular/common": "13.4.0",
 		"@angular/compiler": "13.4.0",
 		"@angular/compiler-cli": "13.4.0",
 		"@angular/core": "13.4.0",
diff --git a/packages/adapters/angular/v14/ng-module.js b/packages/adapters/angular/v14/ng-module.js
index b85a0a6cca..a2030c5dc8 100644
--- a/packages/adapters/angular/v14/ng-module.js
+++ b/packages/adapters/angular/v14/ng-module.js
@@ -1,16 +1,7 @@
 const fs = require('fs');
-const path = require('path');
-
-let ngComponents = fs.readFileSync('./src/components.ts', 'utf-8');
-// ngFile = ngFile.replace(/, NgModule/g, '');
-// ngFile = ngFile.replace(/\/\* AutoGen NgModule(.*\n?)*/, '');
-
-const componentList = ngComponents.split('export class');
-componentList.splice(0, 1);
-componentList.forEach((component, index) => {
-	componentList[index] = component.replace(/ \{(.*\n?)*/, '').trim();
-});
 
+const componentFileContents = fs.readFileSync('./src/components.ts', 'utf-8');
+const componentList = [...componentFileContents.matchAll(/export class ([^ ]+)/g)].map((group) => group[1]);
 const componentListStr = componentList.join(', ');
 
 fs.writeFileSync(
@@ -18,15 +9,19 @@ fs.writeFileSync(
 	`
 /* AutoGen NgModule */
 
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ${componentListStr} } from './components';
-export { ${componentListStr} }
+import { ReplaceTagDirective } from './angular-component-lib/ReplaceTagDirective';
+export { setTagNameTransformer } from './angular-component-lib/tagNameTransformer';
+
 
 @NgModule({
-  declarations: [${componentListStr}],
+  declarations: [ReplaceTagDirective, ${componentListStr}],
   exports: [${componentListStr}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class KoliBriModule {}
+export { ${componentListStr} }
 `,
-	'utf-8'
+	'utf-8',
 );
diff --git a/packages/adapters/angular/v14/package.json b/packages/adapters/angular/v14/package.json
index f20994d1cc..842d22b7de 100644
--- a/packages/adapters/angular/v14/package.json
+++ b/packages/adapters/angular/v14/package.json
@@ -63,6 +63,7 @@
 		"import": "./dist/index.js"
 	},
 	"devDependencies": {
+		"@angular/common": "14.3.0",
 		"@angular/compiler": "14.3.0",
 		"@angular/compiler-cli": "14.3.0",
 		"@angular/core": "14.3.0",
diff --git a/packages/adapters/angular/v15/ng-module.js b/packages/adapters/angular/v15/ng-module.js
index b85a0a6cca..a2030c5dc8 100644
--- a/packages/adapters/angular/v15/ng-module.js
+++ b/packages/adapters/angular/v15/ng-module.js
@@ -1,16 +1,7 @@
 const fs = require('fs');
-const path = require('path');
-
-let ngComponents = fs.readFileSync('./src/components.ts', 'utf-8');
-// ngFile = ngFile.replace(/, NgModule/g, '');
-// ngFile = ngFile.replace(/\/\* AutoGen NgModule(.*\n?)*/, '');
-
-const componentList = ngComponents.split('export class');
-componentList.splice(0, 1);
-componentList.forEach((component, index) => {
-	componentList[index] = component.replace(/ \{(.*\n?)*/, '').trim();
-});
 
+const componentFileContents = fs.readFileSync('./src/components.ts', 'utf-8');
+const componentList = [...componentFileContents.matchAll(/export class ([^ ]+)/g)].map((group) => group[1]);
 const componentListStr = componentList.join(', ');
 
 fs.writeFileSync(
@@ -18,15 +9,19 @@ fs.writeFileSync(
 	`
 /* AutoGen NgModule */
 
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ${componentListStr} } from './components';
-export { ${componentListStr} }
+import { ReplaceTagDirective } from './angular-component-lib/ReplaceTagDirective';
+export { setTagNameTransformer } from './angular-component-lib/tagNameTransformer';
+
 
 @NgModule({
-  declarations: [${componentListStr}],
+  declarations: [ReplaceTagDirective, ${componentListStr}],
   exports: [${componentListStr}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class KoliBriModule {}
+export { ${componentListStr} }
 `,
-	'utf-8'
+	'utf-8',
 );
diff --git a/packages/adapters/angular/v15/package.json b/packages/adapters/angular/v15/package.json
index 276b098b3f..20464ceb55 100644
--- a/packages/adapters/angular/v15/package.json
+++ b/packages/adapters/angular/v15/package.json
@@ -63,6 +63,7 @@
 		"import": "./dist/index.js"
 	},
 	"devDependencies": {
+		"@angular/common": "15.2.10",
 		"@angular/compiler": "15.2.10",
 		"@angular/compiler-cli": "15.2.10",
 		"@angular/core": "15.2.10",
diff --git a/packages/adapters/angular/v16/ng-module.js b/packages/adapters/angular/v16/ng-module.js
index b85a0a6cca..a2030c5dc8 100644
--- a/packages/adapters/angular/v16/ng-module.js
+++ b/packages/adapters/angular/v16/ng-module.js
@@ -1,16 +1,7 @@
 const fs = require('fs');
-const path = require('path');
-
-let ngComponents = fs.readFileSync('./src/components.ts', 'utf-8');
-// ngFile = ngFile.replace(/, NgModule/g, '');
-// ngFile = ngFile.replace(/\/\* AutoGen NgModule(.*\n?)*/, '');
-
-const componentList = ngComponents.split('export class');
-componentList.splice(0, 1);
-componentList.forEach((component, index) => {
-	componentList[index] = component.replace(/ \{(.*\n?)*/, '').trim();
-});
 
+const componentFileContents = fs.readFileSync('./src/components.ts', 'utf-8');
+const componentList = [...componentFileContents.matchAll(/export class ([^ ]+)/g)].map((group) => group[1]);
 const componentListStr = componentList.join(', ');
 
 fs.writeFileSync(
@@ -18,15 +9,19 @@ fs.writeFileSync(
 	`
 /* AutoGen NgModule */
 
-import { NgModule } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { ${componentListStr} } from './components';
-export { ${componentListStr} }
+import { ReplaceTagDirective } from './angular-component-lib/ReplaceTagDirective';
+export { setTagNameTransformer } from './angular-component-lib/tagNameTransformer';
+
 
 @NgModule({
-  declarations: [${componentListStr}],
+  declarations: [ReplaceTagDirective, ${componentListStr}],
   exports: [${componentListStr}],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class KoliBriModule {}
+export { ${componentListStr} }
 `,
-	'utf-8'
+	'utf-8',
 );
diff --git a/packages/adapters/angular/v16/package.json b/packages/adapters/angular/v16/package.json
index 5d4466bdd9..ddb051a27d 100644
--- a/packages/adapters/angular/v16/package.json
+++ b/packages/adapters/angular/v16/package.json
@@ -63,6 +63,7 @@
 		"import": "./dist/index.js"
 	},
 	"devDependencies": {
+		"@angular/common": "16.2.12",
 		"@angular/compiler": "16.2.12",
 		"@angular/compiler-cli": "16.2.12",
 		"@angular/core": "16.2.12",
diff --git a/packages/adapters/angular/v17/package.json b/packages/adapters/angular/v17/package.json
index f426430604..483702deb3 100644
--- a/packages/adapters/angular/v17/package.json
+++ b/packages/adapters/angular/v17/package.json
@@ -63,6 +63,7 @@
 		"import": "./dist/index.js"
 	},
 	"devDependencies": {
+		"@angular/common": "17.0.8",
 		"@angular/compiler": "17.2.4",
 		"@angular/compiler-cli": "17.2.4",
 		"@angular/core": "17.2.4",
diff --git a/packages/components/node_martin/stencil-solid-output-target-0.0.1.tgz b/packages/components/node_martin/stencil-solid-output-target-0.0.1.tgz
deleted file mode 100644
index c1309bd03d6be8c6714b975a8a2e628be56b095b..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 7008
zcmaKwQ*<1R7wuzA(AYK_+g4+>anhi%)7Z9cH?|rZ6SlG4*vVvq$=q-KpYFq5_pIN;
zKJRC*z1N|PLxK6<;9iMcd2aHzyltw7bPKVvlrXQyEH>l|>N-?terxupvs&C5ZD$6w
z<Y<&<7Ms_`?3f4bM)jz>S;HhFD1LDxS#|6_vUS9z3>z{N525C6FL(wC)h8GcEE@&M
zHhw-KZ{2Ag*xu4^T%{EEmW%~nJQYMedwEXoUf+n<IXg@E>qU7!T@@hrJnuha95g-V
zG*4o}W^hD|FlsYS-83Fm&k)gn1{gEeTsk^<MBP;3>eC8)2KbU8X_Lsihnc8`ahfw!
z=ND>$XozM-4Y;Nh?uS4>+N4Td<flpj5Q#PFoQ*$-J}T0$H#wwQWuZ6tRioYdN4|FC
z{S!YeDp%r(Go9nD`*DAVsH+)Elm;(QlW+2HoG-X<=HP~Xg-uA7Z(U$ae}~-A<*M6q
zMh;L)1gfyW7O5k$ve5o%l{RvCMfh-*+%4~dMT`?`QDk)WWx0T9+}L(jS5Gnp8T|U?
zWgpQ+v__u;v<8v$<k#VXKZmZbm033+^Xwh9RDS1l%@G;@in=C%y2JQ&3sw>ZMRNg_
z-PYTT2f=*s{_E6XfYA@-YVK4JZJsfDs70PoN7hxj=U@v4T+&!&At`Z2eXM`cn)Zm<
zqrWsnF`oXTBOgt~L0-NOKs%7Hc9=5NSC05#6h*SBi+X0f_bQLLDz5K~H1q7?wD#R*
zUKQ>rd${yr#ckgw0YRs|>G$_F24XiAS!MrG%K$&=JWiQ#i#1NQ{#RQgF`b%iE-u+!
zg;GtvYAucR4fgZqfzqhIQkhF~sDLG!icrdM+)ekOiitsMbDz;AJ3cooFr}o{6zjs?
z5IwET!ud>??y>)j8FtM52Gt>z_nRk5{A&>Ojncn*XqT%ljw!cAzTWd%p0Ks#7$J=W
zzKI&K+hj&h6~^}u#VC2<oKlehRltrpZD9|doMeW7*l@JnxJ08)27L_s@LnqTF|}=&
z6D5IX6}jLbF&qcBEls~@szUF!2<4&K>~x`ks09<*5h7|sPTqm3o|G4M@~dwpslKQ_
zx<ygra*@$(Nle%g^l9VDp&~ZR2$hMQg0EbA9?9v#D>pz0U^8JLM+2wR+^6g}2eUv2
zmi%6L8)VZ%ffc-T!2c&=dU7;Sof!2;F`vdM`DRFm305y-EAycWY9%oOeGYXZ#~1+m
zSQUiXwn4M0Tk>E>5`p+lB!m#`$a~`kx3%OoAzz_6b=&pVgK|wjLU-W^`;W`o6#wef
z_z#&O1o>?`;-lxbz_^5W(<S(2JZ(wP7NZclgjZKY%kX(OYYU;)eB#!pHZdugNj?bA
z0+7LaQOXR*7k|vgoA=8GC7N~>F|M(Doagvo0$Kst<rH*%zAPE-P0Y|58a!d~Njm(3
zO+F9SuX4w);g@!;0#CTqODlGY?SLxZb`K79N8{Fl?U$+!)1_;FBjH18B3vt=IXQu~
zk?V%TwTP^~w4cZ4{OuyWJ<{)3vQbW@vJu%TyG0hq-BySEU*KSxivUe~yvTu{RVNW~
za+#use@ip!BZjSIb>waM%M8I#&6nOi<E!2Yc^(;|bXxz$3E1b3jQycK=AeC=<%)&l
z0g~|&lo{qlSr8!iD7nxVN{|t0$x?x@H6xLD>QPu(!qn%Em{-Vy(x4!ud~=<ru^kqf
zEoRAK9`d9v$b$<D7GLLZzVo>UIkJI5xg%jo`(BQ(bo=_BK<96-|Cytt^syN`SP=Py
zZN&LA3=a~;<8rS^TxBatdZmQtyy{-t6dnPMXmo>$#+#l%(}+7sOwAy&@w`Vzcm#Y=
zN+M>eFA<@y=yV1ti)5UM(2j%bqMc*3m=(g*49wSJ+o@17W5FZyU!sO|ntmkz`mZn~
zS%ikgF|JTXVp+3V!l_=?bMEx?;m%}Gc=3D<EPfbAI?4WKvMtY!m1-VVX$HdN&iU;f
z&qyl_sYR5ESdO73mkG_h&!S=la$6C1>b|z?S>U{nL3F{6a-bLNs`eUs8w(=L##aVp
zvP(e@SpPINqD%inJ<+*fpC2jgCI~05qpNzjx>GRkq6}TueU3OyY>yZ}3CQI9e~PO=
z*No&HO{{3vu95}UQDVN5+<N$~8OVPluI<k^#aohOHl$@W$H(a9lt7kJtdR78^OKdK
zu9z6hm=^pTaqiZe95QF;g&F}KPwFrm2VpG?7;Xj+M-%ctO8XHY8s14Kg)`8&Nw3Kc
zMy##EVkg>AUf^cZpm8Hfz^e+}bY&zvO}j^B^mTsZJi6ZO;Mcsfzi1{Re%-T<;Y%7p
zq+>*pK^Y$Ug~$pcYBRQNVysa#)79ej<8x@`QW-8g&q&Tif{L5ckoX`T6;`qtw)s|(
zbU2)>{H`yL@t&#~fQ$o18S$U2q?6L%AcN}-jEHIX-sT`v$@I=h@dpYXD(zy<1o_WZ
z#zM#i8D|tC>DUGKp{aHzOC`VCHxYe)THN4L+zMCy(Dq^St$H{WFu@Gd#n!kM;TNGl
zgGyFZSb_@-h3>#2814VeVv$CVAE}&?-jXq<kEsH0q_pjx1-w!@4ofm?+~i2?=^HxR
zdvdKEQ0%&#Q`mkpR4zO}m{SmfL<}cXQ{Em69%abslG~L4ZOYlaVM&Q%Wtbe4H$)i<
zP>AQa=Fpz3v`LunL3kBmYi@^OlJRW5DVYosF>uWg?A>6qJ?%R^UTkWD!CLa~>-q7V
zTZvuBd%vlgve?J>sEozz4()9YkrIO~Q>>|s9)X1_QZnOv8zE2+0y#5l_Ap{9&T<^&
zWQx3sW#lwwOh+E<1H$;6D5hk^r}V)*<aw%J(f?S5b<SbC66Wa4&@7iD_!*;F>5ym7
z2vO?WB+_iVFPVd40$Pv6%Gm#2YxnapQo#gY1{wpXUE#h0>0(0xZXu&UynUR2kmSIA
zrx1$Ywx0*z8ZWD98dN^Bsxl`WGaMM2CKaSgcG#RH!8>E_WM-K<ukR%{*3XfiOI!cZ
zjM)|yzwQ+myY@7Zu=f%Upcs&RU%38c(6<<t1(A9lv#nk9{Uc0b<7*pZnxgBk{BuG-
z(5B2Tqz)X}q{_O$S+ksdPkbNXe(~5tZ%|(xp$4Gul6n^ByM^=PNpRJcF(a5?G78J7
zwn^2~<6X}bw&V_wqBWGo+NxLPrDp7nEBv+v?CsdpSnjODAHwl2xU7c7V2u77xkU>m
zg~xL0yT%zpP-$jKY*<iugnznSiwR-A6;;x_1Z2X^*Mv79Ltw{IJ|jId{h{ws4%`D4
zP73j(d?4teO1R9AFr3=>60?>(rs*vF+oihV5*j(I=V=`r?HWYvxX}n7ZbtM&{*qqO
zcuG5LP7jvFAHg^4@oqm;e9Wxmx1aRu)fXh>!Snc0PMr6leEXdl7EFkc8#ZxKx{RAw
zcm%J3T@@xaB*#Sa!t@;@+*EmF)V@gryHAp6oWBZHOg<ghI~6|0!fOU+H|}3zil=$Y
z$=Lyeihq)fb6$`{+=Ujn1d{Px`ii$B3KR_aN)fMA_{qfM{@5+?4T&iay+019-@R@i
zOXRrATKGpSJ2l4_W25M0e~8LnSP?$$l#w~c`Cub0w0^<f!9&sGcSn|pw8PxO57tHk
zIACUh-;m2PyD8!)9<o&#HMx0b;HMn1JtIrbYm4AUqL@}}8<F-&O|0LCLe_h-VwRqA
zLJCa_LMqY&KMhedXglaQOFLO^TbZ_&y_lHd8YBic>XWVBFqW6QCh_M!hoz8|%-AZP
z^6~<+4fy7&OXgLaZwvo2>pV%J3UhKgqM)vl8gG;o)#@qYezzMr0WFBz`^l<d&abIE
z{&c*h+XF*<_-WW5m;XG}*`T4Zbkur`EI^jj1Y~rRRq|V2cr>12Q1XT@q6W!Rgb|kS
zlaO@usDQL1C|#<U;KVFJzoC8Zd_?+LYWwDx>|XTi1W|L~LPUm-Y|HHDn#5r*w5*nz
zX_(r<JUQN|FGwma=jtoy*}M+7F_zT}WhR+`*F@d}Ls@pjkf#YpVZ~M~v!95S{xVE>
zhJ_>p75Hu;ZVw^%BP*@{rswwB79A-<TYc89ZBy$f3~DptE&X`Lsti<<#M>YmTVFJ2
z)ca$Ii)^YGus0z~P@!tWe|Q!>njz{%9y78OYZL(;J~+&DY!3)S<1~z_Ds`!r6E3sa
z_+O0`g1d;N)r)8N%r?k|Viy#u{79Q45&K9s_Km*YEx~i<rb+;C;8NQ)x%Ar8STl;7
z2HpIaP~tv?fh#fIGj_$Jjrx7UP9j`smAwVvtIlK+TnTQ(_J5-b`ed&V{K0;$-|J`j
z-YR$rW}DDHTUeK&Q?rkutr5#IKElEo3)cLS6OnuTKwQ3D7p$ZfwV_F1MMXvQXUdY_
zWpdkncVSnYotu-ZfX%D-FIDaQqDJnW3nMAKKsiK@nCaU~CHCsS;>BW!K+Q*_SBhSi
zBnP0_wRk@@Bo^MuapwDv8EVbcm*jGqO_{}k7U&mB4ky+CQ6#NczvM|T!n<)Q0?ZRS
zS7ciGzUJ$dV~`yl$C-h5)s-;;BVpo7d`oEHG`|4A;zT#Qo@AsspqymEX58GG=oHa6
z4vpAprGBF^TyV9dHXBK4h}yy^pUmafB6~?ZS-ft3{maVX#}091x4Vid&QL`$=BU4s
z0NTz_GU3C7Xd&t`_k}N-Oa1m*uTK3h-|lZuR^=-(<%-Z7d1BW#M0WJU?mQlTif5CF
zFhgXfG?<C@Dt6bR<6O&tx{7@@O@b&g3gaA%oB#)W{STw{opH(nO~_BNMgI?I!oQEh
zR$*w67wO{h(|Zv3@Out4h%{--^5m?;oU!27#Z840oYJdL%j#SjD2>2^A#S2hD}AJ)
zvN5ar+^WVmr-tH_L1oQ<OVGH^PcgOteZZ@!$o4yd*7P*5n-z%_iBFEaNo7iw?U60X
zi}M#^j>VDb$J?%;914@lsI0SnD_`&bkF?)J6i5dYRt97-?^wk?7jcfgv8tVX*lBl8
z^ImbQ_NXkfFSh+(@+Zfom(tXS@!v+NtADDmr86BL8<cEN!`n#$(^FCvc+(tcAH?ig
ziXHm)F$dY^hQ9F^KE3R&&kAaP6Z*j)GBHD^md!0CH$^sx;D*jxZpW-$2u%Ma;RsAS
z`osNDJ>$>9Qv{s(_5YUMb=(hU90f1w32@U0Rot+#>8Ki3a7*_HRqx}PImo*Iq%wRo
z<a{)8_g|GOWFUV|L@p?<-kr~9=ZvA_9Ki-YAK!wSjBjrwR=uX*ikyy>%#~Cv(dN!m
zBi9dwD(Za$^F61E*z68WegHn&xe;3f)pI!Y7|=6O!>oqQayYv}xr0i=ha@)2n2Y9p
zc%elnIa~LT#=pjMThP~S5acg(AVI+}==x$8^m=o>baS#AWZh!~-Sl>P{n)iPh1QM*
zuMQyUU4Tw{(FI9i62wH#Uv-QCb%kWnJ;BZ0RGg};30E|6tmi{#1+WB>O#@h3vL2~Q
znOM3j9!S*rR{Fhi*A%9Im=X`EK+IdiAC3Ln-nK@DCT>Rm!=E&Z%v!Fg_X7MpaM1-O
zO}Gah{zqQ-JvhlT1X^1p_@V9duW~|<9C{^M7nBtT_4JwsL%&k!u;f*}36NSoApf@I
zkZ?(v@G-Y=$DQxvxB5rM-(dLD-Y`9p$z9ruWQwFvGjp9l?l>pd3(iF?L(CS|%Dkty
z=UyFK=*C4v`YUo-jsg$H!IysbjOr01Sk1U|QhT|NWSdszxjTNemSnp;((J!sV!v8T
zPFmvN`vm}4;g~yZ<Wbz>6wZ5Q$bp<)%qT;DD;JaRE%+VK8(eLYV#d4-%@I;JqJ_Fn
zF4P(6@<U=UM4kB)42?^PqYWJ$W4`G#8uA|uOlIPKW4`z=qz}i8s}+X8aj#uiVlJP3
zq6X4(LgL6d2^aJJPEoHn(~mN^p6H)WrTQVJpzR$98)COpM`O=4@tF&kaiNvak8HG_
z(x6~llD?(FKH}E`806Lts8k3A_)}5U2bxAEpOn0Wf0mgF9M06M0=5Wf0h18U{aLsj
z0GFyE5EWnL2f`?Pe(3CICZO^+3WEm#sB^_&{g!xFXbwlj@D>Wj>W^vJzcl(@cx+)B
zmCWbz<HsNvmF-u0WR%AjDbZqNU8KLVxKUd{y^aCS%ZvTAuO(fzSjApOB!TN4*I`<U
z!hN{;c<#zJZ|HbKbj+c{rgeVKy9VPTAm(9cLyZ^K0__>?^=dM)J<0@}Qf?$Hzyzyw
zZ+bR1-P-Rl-{iY9Jhk~0BY%ZjJJ56;7Xf;-C<2BJn+%k$Erwt3hQldtDxV2=(FdX~
zhz0meEDcDFrgyT2Y{rCcPMa{ADCsG_AI$fllzT%`q8OSXH*KE`6d;*=#M|#g_Lo7B
zp6xnFqr`iI$;N+2k3@*~oT#X9N@G5#{L|u)Dtk`m`JILa4Ev-O@J4A!6^O3A_DRNz
zY<5b@%+Y~t(IpfcchrKNHrq`iKg}KM0mZ#-g1RExEGdunWNGw@cC!fgJrY(JVFU$T
ze4LekzKft5oV`RAU#3hdilD;QB(*`F71SUC$S1z;-7x=#?<mX#7H9}qw`c_-6Kih9
zNd&~zf};?MDO`Wy)*&UCAEKj=Qa6CMVptUhuk(>q0?og>iK@a0kB}ca1Aoy6An;&d
zmL$6lz$n=rh}!LaaGv|1z)J9E7Lkvx-SG<o@lZ*WaPC|=hH_7NU~v+tO%8tx_;<r5
z$0tR{aO#E5PV4~?vJP%{Des(d^(-vlS2rmR2(r^YH&e<6*GR$=n&mds)R_}@fTLw7
zVjkuN9jt_@_x(hgZrK+oywF{GFL^^Okme1`cLVsnmoM8Dd(;#Cwu9QK$LaEB#e1D|
zk97TRd*9q7i{%=9c)eA-=M^7L`ChEwP8Y(nAG=o1pOreJ&WZ{=(SREY$OTzZS7nq_
z+NWMih)z!Mr0@$;S$n}aIz7t@W*i26VJEj6{u|eA$c?J^bz*|j+4C?qX=DO^VW6RD
zwN`~hQ&3_LgaAD#n#<|!RR5FweoQ$*Jiw~_iNl*3ax$wH^=a83b?sR&5PAD>wGWgu
zk9_3Q>An^^{EKa{?xk%JM`oxTQ+O7HmPW>J${XZxXJQ=u_i&cZv$3$#8#{hA9Eyo_
zb&aidSnS7pI#i3=dWn(R(6|A~RLbr1q(r^1TSdH8R6G51ELps(sVpg_h3hC+jM_hN
z*{NlOX*i2Hcy3|c-mEKsZ3@NRgqqa)fDfLzpciw{p^cME=rshn0y2<rV%WlRs^GVO
z-^;z31n-+dHwW*#-l~IOdZYbcBpminB_uYheLOq|T{$=heFH)rMQfd&mG568CV$1e
z-EUyEx34`Y_uOLqZrppzf`S+`p{0%*C7At2#C229jew?t3@GxayS!qpk02<c(!*;t
zv{fl_#0+R6#pLg@?^~Aq8Y4T=<L^Dvxdiu~+s0**AGRCz9KnGVbgJem;5h27YZU1h
zh#K`1LeZ|^UbZo)Nxf5^#0lOy@k(T|<!BO}^NapA!WG`?fAO%(gR;-nTPN20>9h6#
zG%43Yz3OBw-brp~#ZR~`$`H(;PVRF>1!l}-wKd1^A(u?GBVbHfiWdN_G&1TQs=8kU
zsnxW*r|DcfIB&04>$INPxP_yUa!j5FW5}&>s;U^+CFekQKCuUEA>px^sT_(GOwi_m
zL;l7yU|6U$*_DxW(iDwGk#k1?K4pp#p{l!N)KQRW9#JCrQx*>oc#aJ_bDQdT!_9(w
z%sh_JxiBO#;QjcTmH7vr1q)#hoN>ZrI_^l27*Q0G4qhf>F2C(cw&EVA`%t@)^P*#o
z??hI8`$1!ufk2;+N&ws{<y|f>RFcppxw4vw$E7*4Zi-8g15V}GlXDBu6l?7D>HhG4
zLFl(ZZ+Q3+=a#fA68KwjB&dikc&10oVLv5#bi<TDAnhdYrVt~hg|xei{7)lAspZ1*
z+=x?}AxU87D9frP47N)58(ZIfHDUu`<#ySHu2AkwrMcT%C07)2!Roy;yLJ!pJyght
z7UP~FKtw4mC>{aNMEiJtH(!TMvein2FtTcT8*z-Mm>t}1a=(FXMk9A)`H+$<Ot7<d
zoFsTgugABmbVycTbn(V3y9Y)T04;V`2&tfU$>koUX}HNowLXv$!zUS-xFlZCrn2Tt
zO&FoFlv`jVmkM!kaIiIW9GBoW!Po8=5bm9AYCjvE*3joN$I7zfP*M|MvPS|#58%Yo
ze#&t(uevKC%jD@(kMS6{;|I(zrw!~kM9U^x^Q`O>V!!iCyTVi%avO0h>(#u|j{~C_
z8L$CqtiG1UR-wJ|hm!-dexU+vQiq5_hn>ikohp{xa4%i@^$oX7Wtyb|=pia&M{ECD
zE@PR;OMfc_v9^1kTxflXPyeN*5<6ay)a%gf1(K7+Iy8zxxp&tZ<N#>U)S>15<bYTN
zVkq-=l5IYqGZzGxWLCsN@I}idV^-`FDxB`c174*iKODHr_c35dkczV%22$P1<S*C!
zgPot|ms+K+vhTWGBKYX@Oe=|Ef0M~@qISENd@iaK?ZPlxrW9*`D#N?|BJR#kq0BY4
zH30^QM;Qh}-)0@*>xH1(FYN!ly~Co8A)h+$PYH+qd3sRMrR(=Yt~G~1i8~O<KD#}t
zz9hx;So=S+EV^)Cltrt@1e|{vs?q{LtmXF3QO=5k8v)1|<g`z5EAoGg$d5yVr5}e#
zRY!E+djo@nO2-HzF1#CvKmS(hEny$wW1wlZPDK&;uxRXcy0!0i;+)X7ZzMMw{xa5y
zEpCftyM>G7<K7ZmvT9_Oc@H8%(gkzz=-pvx<mHeS^G^pH=lRB72X&vp7xSG+^gO*o
z)So-2-y02mT9Aw;8(EsQa2xp6>_ubXPD(UD?k5@;keYa!pP{f86vxN84$B#`)9FOv
z2+N_(1D>inF3=IjBIvdFWB|0e71AUM?aN^F%1k5N^0pQV>N`zaO0>W|P9^H2@fujc
zUEUoem<mWHPF`pA*2<Er<>;QUQCcj03v5w!_qu1*W4oU)wTn(S(Vkcm4|?S02mo9|
zyR2Sz8+PXlpw|vJnV|ow<hETSCJ61S-HmF4N%X7n^*`&zo323U<u*wY(%Zq;SR~?J
zp?%F)GhHTH_Lc>|oco29K~nBwS>hn_t}R_G#E|Efe&zn}>PgXK0_$fYeX)i91n<Kf
h?f58nfsrlXH`5+NZSmv(VP6PECUSf5gIR%r`9Deko~!@>

diff --git a/packages/components/package.json b/packages/components/package.json
index 9e06eb71d2..e9e0564d39 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -74,12 +74,13 @@
 		"markdown-it": "14.0.0"
 	},
 	"devDependencies": {
-		"@stencil/angular-output-target": "0.8.4",
+		"@public-ui/stencil-angular-output-target": "0.9.0",
+		"@public-ui/stencil-react-output-target": "0.6.0",
+		"@public-ui/stencil-solid-output-target": "0.2.0",
+		"@public-ui/stencil-vue-output-target": "0.9.0",
 		"@stencil/core": "4.12.6",
 		"@stencil/postcss": "2.1.0",
 		"@stencil/sass": "3.0.10",
-		"@stencil/solid-output-target": "file:node_martin/stencil-solid-output-target-0.0.1.tgz",
-		"@stencil/vue-output-target": "0.8.7",
 		"@types/jest": "26.0.24",
 		"@types/markdown-it": "13.0.7",
 		"@types/mustache": "4.2.5",
@@ -109,7 +110,6 @@
 		"prettier": "3.2.5",
 		"pug": "3.0.2",
 		"rimraf": "5.0.5",
-		"sdvg-react-output-target": "https://gitpkg.now.sh/sdvg/stencil-ds-output-targets/packages/react-output-target?custom-tag-name-dist",
 		"stencil-awesome-test": "1.0.6",
 		"terser": "5.29.1",
 		"tslib": "2.6.2",
diff --git a/packages/components/src/components/alert/readme.md b/packages/components/src/components/alert/readme.md
index 25bfd938c6..d5aca06401 100644
--- a/packages/components/src/components/alert/readme.md
+++ b/packages/components/src/components/alert/readme.md
@@ -99,28 +99,13 @@ Bei der **Alert**-Komponente wurden insbesondere folgende Punkte der Barrierefre
 
 ### Used by
 
-- [kol-alert](.)
 - kol-input
 - [kol-input-radio](../input-radio)
 
-### Depends on
-
-- [kol-heading-wc](../heading)
-- kol-button-wc
-- [kol-icon](../icon)
-
 ### Graph
 
 ```mermaid
 graph TD;
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert --> kol-alert-wc
   kol-input --> kol-alert-wc
   kol-input-radio --> kol-alert-wc
   style kol-alert-wc stroke:#333,stroke-width:4px
diff --git a/packages/components/src/components/input-checkbox/readme.md b/packages/components/src/components/input-checkbox/readme.md
index d16275d095..7d8b5c37ee 100644
--- a/packages/components/src/components/input-checkbox/readme.md
+++ b/packages/components/src/components/input-checkbox/readme.md
@@ -95,31 +95,4 @@ Type: `Promise<boolean | undefined>`
 | ---------- | ------------------------------ |
 | `"expert"` | Die Beschriftung der Checkbox. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-- [kol-icon](../icon)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-checkbox --> kol-input
-  kol-input-checkbox --> kol-icon
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-checkbox stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-color/readme.md b/packages/components/src/components/input-color/readme.md
index 13bc2ed467..cd71d5fae9 100644
--- a/packages/components/src/components/input-color/readme.md
+++ b/packages/components/src/components/input-color/readme.md
@@ -83,29 +83,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-color --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-color stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-date/readme.md b/packages/components/src/components/input-date/readme.md
index dcc2d92d1e..e418287717 100644
--- a/packages/components/src/components/input-date/readme.md
+++ b/packages/components/src/components/input-date/readme.md
@@ -118,29 +118,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-date --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-date stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-email/readme.md b/packages/components/src/components/input-email/readme.md
index 77a0962581..1aa52135d2 100644
--- a/packages/components/src/components/input-email/readme.md
+++ b/packages/components/src/components/input-email/readme.md
@@ -87,29 +87,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-email --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-email stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-file/readme.md b/packages/components/src/components/input-file/readme.md
index 2ffecf721b..7e04a7b8d5 100644
--- a/packages/components/src/components/input-file/readme.md
+++ b/packages/components/src/components/input-file/readme.md
@@ -78,29 +78,4 @@ Type: `Promise<FileList | null | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-file --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-file stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-number/readme.md b/packages/components/src/components/input-number/readme.md
index 914bfd91af..fdc4303036 100644
--- a/packages/components/src/components/input-number/readme.md
+++ b/packages/components/src/components/input-number/readme.md
@@ -77,29 +77,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-number --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-number stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-password/readme.md b/packages/components/src/components/input-password/readme.md
index 6007293d2e..77925a0876 100644
--- a/packages/components/src/components/input-password/readme.md
+++ b/packages/components/src/components/input-password/readme.md
@@ -77,29 +77,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-password --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-password stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-radio/readme.md b/packages/components/src/components/input-radio/readme.md
index 2c8c05cc56..457a58a6f6 100644
--- a/packages/components/src/components/input-radio/readme.md
+++ b/packages/components/src/components/input-radio/readme.md
@@ -115,26 +115,13 @@ Type: `Promise<W3CInputValue | undefined>`
 
 ### Depends on
 
-- kol-input
 - [kol-alert-wc](../alert)
 
 ### Graph
 
 ```mermaid
 graph TD;
-  kol-input-radio --> kol-input
   kol-input-radio --> kol-alert-wc
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
   style kol-input-radio stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/input-range/readme.md b/packages/components/src/components/input-range/readme.md
index fccbae72e8..109c4eeff5 100644
--- a/packages/components/src/components/input-range/readme.md
+++ b/packages/components/src/components/input-range/readme.md
@@ -88,29 +88,4 @@ Type: `Promise<number | undefined>`
 | ---- | ------------------------------------- |
 |      | Die Beschriftung des Eingabeelements. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-range --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-range stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/input-text/readme.md b/packages/components/src/components/input-text/readme.md
index 4a5e852094..a180c1a0db 100644
--- a/packages/components/src/components/input-text/readme.md
+++ b/packages/components/src/components/input-text/readme.md
@@ -98,29 +98,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-input-text --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-input-text stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/pagination/readme.md b/packages/components/src/components/pagination/readme.md
index 8f8e1c68a1..78b981fe16 100644
--- a/packages/components/src/components/pagination/readme.md
+++ b/packages/components/src/components/pagination/readme.md
@@ -59,37 +59,4 @@ Klassische Anwendungsbereiche einer Paginierung sind z.B. Blog-ähnliche Inhalte
 | `_siblingCount`      | `_sibling-count`     | Defines the amount of pages to show next to the current page.                                                      | `number \| undefined`                                                                                                                                                                                                  | `1`         |
 | `_tooltipAlign`      | `_tooltip-align`     | Defines where to show the Tooltip preferably: top, right, bottom or left.                                          | `"bottom" \| "left" \| "right" \| "top" \| undefined`                                                                                                                                                                  | `'top'`     |
 
-## Dependencies
-
-### Used by
-
-- [kol-table](../table)
-
-### Depends on
-
-- kol-button-wc
-- [kol-select](../select)
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-pagination --> kol-button-wc
-  kol-pagination --> kol-select
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-select --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-table --> kol-pagination
-  style kol-pagination stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/select/readme.md b/packages/components/src/components/select/readme.md
index c40312c50c..64d70f8055 100644
--- a/packages/components/src/components/select/readme.md
+++ b/packages/components/src/components/select/readme.md
@@ -126,34 +126,4 @@ Type: `Promise<Stringified<W3CInputValue[]> | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Used by
-
-- [kol-pagination](../pagination)
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-select --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  kol-pagination --> kol-select
-  style kol-select stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/table/readme.md b/packages/components/src/components/table/readme.md
index 6d90d16791..6d8cedfe4d 100644
--- a/packages/components/src/components/table/readme.md
+++ b/packages/components/src/components/table/readme.md
@@ -186,37 +186,4 @@ Warum die Tabelle einen **Tabindex** hat, wird auf der folgenden Webseite beschr
 | `_pagination`           | `_pagination`          | Defines whether to show the data distributed over multiple pages.                                                  | `boolean \| string \| undefined \| { _page: number; } & { _on?: KoliBriPaginationButtonCallbacks \| undefined; _page?: number \| undefined; _max?: number \| undefined; _boundaryCount?: number \| undefined; _hasButtons?: boolean \| Stringified<PaginationHasButton> \| undefined; _pageSize?: number \| undefined; _pageSizeOptions?: Stringified<number[]> \| undefined; _siblingCount?: number \| undefined; _customClass?: string \| undefined; _label?: string \| undefined; _tooltipAlign?: AlignPropType \| undefined; }` | `undefined` |
 | `_paginationPosition`   | `_pagination-position` | Controls the position of the pagination.                                                                           | `"both" \| "bottom" \| "top" \| undefined`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | `'bottom'`  |
 
-## Dependencies
-
-### Depends on
-
-- [kol-button](../button)
-- [kol-pagination](../pagination)
-- kol-button-wc
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-table --> kol-button
-  kol-table --> kol-pagination
-  kol-table --> kol-button-wc
-  kol-button --> kol-button-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-pagination --> kol-button-wc
-  kol-pagination --> kol-select
-  kol-select --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-table stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/components/textarea/readme.md b/packages/components/src/components/textarea/readme.md
index efed22ed12..259432429f 100644
--- a/packages/components/src/components/textarea/readme.md
+++ b/packages/components/src/components/textarea/readme.md
@@ -92,29 +92,4 @@ Type: `Promise<string | undefined>`
 | ---- | ----------------------------------- |
 |      | Die Beschriftung des Eingabefeldes. |
 
-## Dependencies
-
-### Depends on
-
-- kol-input
-
-### Graph
-
-```mermaid
-graph TD;
-  kol-textarea --> kol-input
-  kol-input --> kol-icon
-  kol-input --> kol-button-wc
-  kol-input --> kol-tooltip-wc
-  kol-input --> kol-alert-wc
-  kol-button-wc --> kol-span-wc
-  kol-button-wc --> kol-tooltip-wc
-  kol-span-wc --> kol-icon
-  kol-tooltip-wc --> kol-span-wc
-  kol-alert-wc --> kol-heading-wc
-  kol-alert-wc --> kol-button-wc
-  kol-alert-wc --> kol-icon
-  style kol-textarea stroke:#333,stroke-width:4px
-```
-
 ---
diff --git a/packages/components/src/utils/dev.utils.ts b/packages/components/src/utils/dev.utils.ts
index 0b76cd2a63..f4ee7157cf 100644
--- a/packages/components/src/utils/dev.utils.ts
+++ b/packages/components/src/utils/dev.utils.ts
@@ -41,7 +41,7 @@ export const initKoliBri = (): void => {
 	`,
 		{
 			forceLog: true,
-		}
+		},
 	);
 };
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ab8d609651..8979750f80 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -59,6 +59,9 @@ importers:
 
   packages/adapters/angular/v11:
     devDependencies:
+      '@angular/common':
+        specifier: 11.2.14
+        version: 11.2.14(@angular/core@11.2.14)(rxjs@6.5.5)
       '@angular/compiler':
         specifier: 11.2.14
         version: 11.2.14
@@ -104,6 +107,9 @@ importers:
 
   packages/adapters/angular/v12:
     devDependencies:
+      '@angular/common':
+        specifier: 12.2.17
+        version: 12.2.17(@angular/core@12.2.17)(rxjs@7.6.0)
       '@angular/compiler':
         specifier: 12.2.17
         version: 12.2.17
@@ -149,6 +155,9 @@ importers:
 
   packages/adapters/angular/v13:
     devDependencies:
+      '@angular/common':
+        specifier: 13.4.0
+        version: 13.4.0(@angular/core@13.4.0)(rxjs@7.6.0)
       '@angular/compiler':
         specifier: 13.4.0
         version: 13.4.0
@@ -194,6 +203,9 @@ importers:
 
   packages/adapters/angular/v14:
     devDependencies:
+      '@angular/common':
+        specifier: 14.3.0
+        version: 14.3.0(@angular/core@14.3.0)(rxjs@7.6.0)
       '@angular/compiler':
         specifier: 14.3.0
         version: 14.3.0(@angular/core@14.3.0)
@@ -239,6 +251,9 @@ importers:
 
   packages/adapters/angular/v15:
     devDependencies:
+      '@angular/common':
+        specifier: 15.2.10
+        version: 15.2.10(@angular/core@15.2.10)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: 15.2.10
         version: 15.2.10(@angular/core@15.2.10)
@@ -284,6 +299,9 @@ importers:
 
   packages/adapters/angular/v16:
     devDependencies:
+      '@angular/common':
+        specifier: 16.2.12
+        version: 16.2.12(@angular/core@16.2.12)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: 16.2.12
         version: 16.2.12(@angular/core@16.2.12)
@@ -329,6 +347,9 @@ importers:
 
   packages/adapters/angular/v17:
     devDependencies:
+      '@angular/common':
+        specifier: 17.0.8
+        version: 17.0.8(@angular/core@17.2.4)(rxjs@7.8.1)
       '@angular/compiler':
         specifier: 17.2.4
         version: 17.2.4(@angular/core@17.2.4)
@@ -539,9 +560,18 @@ importers:
         specifier: 14.0.0
         version: 14.0.0
     devDependencies:
-      '@stencil/angular-output-target':
-        specifier: 0.8.4
-        version: 0.8.4(@stencil/core@4.12.6)
+      '@public-ui/stencil-angular-output-target':
+        specifier: 0.9.0
+        version: 0.9.0(@stencil/core@4.12.6)
+      '@public-ui/stencil-react-output-target':
+        specifier: 0.6.0
+        version: 0.6.0(@stencil/core@4.12.6)
+      '@public-ui/stencil-solid-output-target':
+        specifier: 0.2.0
+        version: 0.2.0(@stencil/core@4.12.6)
+      '@public-ui/stencil-vue-output-target':
+        specifier: 0.9.0
+        version: 0.9.0(@stencil/core@4.12.6)
       '@stencil/core':
         specifier: 4.12.6
         version: 4.12.6
@@ -551,12 +581,6 @@ importers:
       '@stencil/sass':
         specifier: 3.0.10
         version: 3.0.10(@stencil/core@4.12.6)
-      '@stencil/solid-output-target':
-        specifier: file:node_martin/stencil-solid-output-target-0.0.1.tgz
-        version: file:packages/components/node_martin/stencil-solid-output-target-0.0.1.tgz(@stencil/core@4.12.6)
-      '@stencil/vue-output-target':
-        specifier: 0.8.7
-        version: 0.8.7(@stencil/core@4.12.6)
       '@types/jest':
         specifier: 26.0.24
         version: 26.0.24
@@ -644,9 +668,6 @@ importers:
       rimraf:
         specifier: 5.0.5
         version: 5.0.5
-      sdvg-react-output-target:
-        specifier: https://gitpkg.now.sh/sdvg/stencil-ds-output-targets/packages/react-output-target?custom-tag-name-dist
-        version: '@gitpkg.now.sh/sdvg/stencil-ds-output-targets/packages/react-output-target?custom-tag-name-dist(@stencil/core@4.12.6)'
       stencil-awesome-test:
         specifier: 1.0.6
         version: 1.0.6(@stencil/core@4.12.6)
@@ -1208,6 +1229,89 @@ packages:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.19
 
+  /@angular/common@11.2.14(@angular/core@11.2.14)(rxjs@6.5.5):
+    resolution: {integrity: sha512-ZSLV/3j7eCTyLf/8g4yBFLWySjiLz3vLJAGWscYoUpnJWMnug1VRu6zoF/COxCbtORgE+Wz6K0uhfS6MziBGVw==}
+    peerDependencies:
+      '@angular/core': 11.2.14
+      rxjs: ^6.5.3
+    dependencies:
+      '@angular/core': 11.2.14(rxjs@6.5.5)(zone.js@0.11.8)
+      rxjs: 6.5.5
+      tslib: 2.6.2
+    dev: true
+
+  /@angular/common@12.2.17(@angular/core@12.2.17)(rxjs@7.6.0):
+    resolution: {integrity: sha512-/Rc83mzlL6YZScYTzg+Ng2hiCSf3jUVHAfQ8cyLOIMj/y8863Q+DMLVWW+ttvHwCjEFY44pC8IPyBl5FmSJYHg==}
+    engines: {node: ^12.14.1 || >=14.0.0}
+    peerDependencies:
+      '@angular/core': 12.2.17
+      rxjs: ^6.5.3 || ^7.0.0
+    dependencies:
+      '@angular/core': 12.2.17(rxjs@7.6.0)(zone.js@0.11.8)
+      rxjs: 7.6.0
+      tslib: 2.6.2
+    dev: true
+
+  /@angular/common@13.4.0(@angular/core@13.4.0)(rxjs@7.6.0):
+    resolution: {integrity: sha512-DHbPqRaxW7GmnkxqZaaasgC5OaFTeTBrmr7MJUsqsSGePHWuJYWU4QS3Fn86zd/VESJgBGmq2aCDEUmzfjnRQA==}
+    engines: {node: ^12.20.0 || ^14.15.0 || >=16.10.0}
+    peerDependencies:
+      '@angular/core': 13.4.0
+      rxjs: ^6.5.3 || ^7.4.0
+    dependencies:
+      '@angular/core': 13.4.0(rxjs@7.6.0)(zone.js@0.11.8)
+      rxjs: 7.6.0
+      tslib: 2.6.2
+    dev: true
+
+  /@angular/common@14.3.0(@angular/core@14.3.0)(rxjs@7.6.0):
+    resolution: {integrity: sha512-pV9oyG3JhGWeQ+TFB0Qub6a1VZWMNZ6/7zEopvYivdqa5yDLLDSBRWb6P80RuONXyGnM1pa7l5nYopX+r/23GQ==}
+    engines: {node: ^14.15.0 || >=16.10.0}
+    peerDependencies:
+      '@angular/core': 14.3.0
+      rxjs: ^6.5.3 || ^7.4.0
+    dependencies:
+      '@angular/core': 14.3.0(rxjs@7.6.0)(zone.js@0.12.0)
+      rxjs: 7.6.0
+      tslib: 2.6.2
+    dev: true
+
+  /@angular/common@15.2.10(@angular/core@15.2.10)(rxjs@7.8.1):
+    resolution: {integrity: sha512-jdBn3fctkqoNrJn9VLsUHpcCEhCxWSczdsR+BBbD6T0oLl6vMrAVNjPwfBejnlgfWN1KoRU9kgOYsMxa5apIWQ==}
+    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0}
+    peerDependencies:
+      '@angular/core': 15.2.10
+      rxjs: ^6.5.3 || ^7.4.0
+    dependencies:
+      '@angular/core': 15.2.10(rxjs@7.8.1)(zone.js@0.12.0)
+      rxjs: 7.8.1
+      tslib: 2.6.2
+    dev: true
+
+  /@angular/common@16.2.12(@angular/core@16.2.12)(rxjs@7.8.1):
+    resolution: {integrity: sha512-B+WY/cT2VgEaz9HfJitBmgdk4I333XG/ybC98CMC4Wz8E49T8yzivmmxXB3OD6qvjcOB6ftuicl6WBqLbZNg2w==}
+    engines: {node: ^16.14.0 || >=18.10.0}
+    peerDependencies:
+      '@angular/core': 16.2.12
+      rxjs: ^6.5.3 || ^7.4.0
+    dependencies:
+      '@angular/core': 16.2.12(rxjs@7.8.1)(zone.js@0.13.3)
+      rxjs: 7.8.1
+      tslib: 2.6.2
+    dev: true
+
+  /@angular/common@17.0.8(@angular/core@17.2.4)(rxjs@7.8.1):
+    resolution: {integrity: sha512-fFfwtdg7H+OkqnvV/ENu8F8KGfgIiH16DDbQqYY5KQyyQB+SMsoVW29F1fGx6Y30s7ZlsLOy6cHhgrw74itkSw==}
+    engines: {node: ^18.13.0 || >=20.9.0}
+    peerDependencies:
+      '@angular/core': 17.0.8
+      rxjs: ^6.5.3 || ^7.4.0
+    dependencies:
+      '@angular/core': 17.2.4(rxjs@7.8.1)(zone.js@0.14.4)
+      rxjs: 7.8.1
+      tslib: 2.6.2
+    dev: true
+
   /@angular/compiler-cli@11.2.14(@angular/compiler@11.2.14)(typescript@4.1.2):
     resolution: {integrity: sha512-A7ltnCp03/EVqK/Q3tVUDsokgz5GHW3dSPGl0Csk7Ys5uBB9ibHTmVt4eiXA4jt0+6Bk+mKxwe5BEDqLvwYFAg==}
     engines: {node: '>=10.0'}
@@ -6378,6 +6482,38 @@ packages:
       - domexception
     dev: true
 
+  /@public-ui/stencil-angular-output-target@0.9.0(@stencil/core@4.12.6):
+    resolution: {integrity: sha512-kmF0p9OqBm/ZEUXS9fu+eTyjcLi1Ryv8/bXFlGu62M/xmIoY8yofUuqxuSA6eEi6gqyOL3CkugDeIXwL+upfFw==}
+    peerDependencies:
+      '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0'
+    dependencies:
+      '@stencil/core': 4.12.6
+    dev: true
+
+  /@public-ui/stencil-react-output-target@0.6.0(@stencil/core@4.12.6):
+    resolution: {integrity: sha512-rMxQJo/nqegKOKfVwncvH+RbWB6ZnPaINdeqwpSTCdCX2u+wM5yQydB3+BU7c33gkfihJlmwyauEb0EQQusOHQ==}
+    peerDependencies:
+      '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0'
+    dependencies:
+      '@stencil/core': 4.12.6
+    dev: true
+
+  /@public-ui/stencil-solid-output-target@0.2.0(@stencil/core@4.12.6):
+    resolution: {integrity: sha512-w06wR57l0i3gMY4QoxA8AuoIYo9tWXdU+1SRa4kNFiZXgLZzeFg0/WYX3aNLbOybreN6E1iNnF6wJO5ncE1yHA==}
+    peerDependencies:
+      '@stencil/core': '>=2.17.2'
+    dependencies:
+      '@stencil/core': 4.12.6
+    dev: true
+
+  /@public-ui/stencil-vue-output-target@0.9.0(@stencil/core@4.12.6):
+    resolution: {integrity: sha512-ZFwrOAYTSxRwLG4q5WU8mGerMUoiAdFlzOg65AR04tUFAKgd99HHJ+0lkc/8ugH572oBB9fwgJ1POJJPdrpy/A==}
+    peerDependencies:
+      '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0'
+    dependencies:
+      '@stencil/core': 4.12.6
+    dev: true
+
   /@puppeteer/browsers@2.1.0:
     resolution: {integrity: sha512-xloWvocjvryHdUjDam/ZuGMh7zn4Sn3ZAaV4Ah2e2EwEt90N3XphZlSsU3n0VDc1F7kggCjMuH0UuxfPQ5mD9w==}
     engines: {node: '>=18'}
@@ -6796,14 +6932,6 @@ packages:
       p-map: 4.0.0
     dev: true
 
-  /@stencil/angular-output-target@0.8.4(@stencil/core@4.12.6):
-    resolution: {integrity: sha512-QvmHTueXXs5vB9W2L12uEzFmAuR8sqATJV2b+SCFmYsjJSaymiSqR3dKo2wnr0tZiTgU1t16BWaUKiSh3wPXpw==}
-    peerDependencies:
-      '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0'
-    dependencies:
-      '@stencil/core': 4.12.6
-    dev: true
-
   /@stencil/core@4.12.6:
     resolution: {integrity: sha512-15JO2TdaxGVKNdLZb/2TtDa+juj3XGD/V0y/disgdzYYSnajgSh06nwODfdHz9eTUh1Hisz+KIo857I1rCZrfg==}
     engines: {node: '>=16.0.0', npm: '>=7.10.0'}
@@ -6830,14 +6958,6 @@ packages:
       '@stencil/core': 4.12.6
     dev: true
 
-  /@stencil/vue-output-target@0.8.7(@stencil/core@4.12.6):
-    resolution: {integrity: sha512-hgOzbKKgLdCFrhLpmaw/qQrPSXl6hZ09K+j3p/iWh3esq6sxnwuW1PJKLniwkT4Z/JlDIk6stGPGQYi+WE5I2Q==}
-    peerDependencies:
-      '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0'
-    dependencies:
-      '@stencil/core': 4.12.6
-    dev: true
-
   /@swc/core-darwin-arm64@1.3.101:
     resolution: {integrity: sha512-mNFK+uHNPRXSnfTOG34zJOeMl2waM4hF4a2NY7dkMXrPqw9CoJn4MwTXJcyMiSz1/BnNjjTCHF3Yhj0jPxmkzQ==}
     engines: {node: '>=10'}
@@ -21420,6 +21540,7 @@ packages:
   /uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
+    requiresBuild: true
 
   /uuid@9.0.1:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
@@ -22346,25 +22467,3 @@ packages:
     dependencies:
       tslib: 2.6.2
     dev: true
-
-  '@gitpkg.now.sh/sdvg/stencil-ds-output-targets/packages/react-output-target?custom-tag-name-dist(@stencil/core@4.12.6)':
-    resolution: {tarball: https://gitpkg.now.sh/sdvg/stencil-ds-output-targets/packages/react-output-target?custom-tag-name-dist}
-    id: '@gitpkg.now.sh/sdvg/stencil-ds-output-targets/packages/react-output-target?custom-tag-name-dist'
-    name: '@stencil/react-output-target'
-    version: 0.5.3
-    peerDependencies:
-      '@stencil/core': '>=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0'
-    dependencies:
-      '@stencil/core': 4.12.6
-    dev: true
-
-  file:packages/components/node_martin/stencil-solid-output-target-0.0.1.tgz(@stencil/core@4.12.6):
-    resolution: {integrity: sha512-leO/+AmnieoDOB2Pv3sSk6QOI3htP7ENTnaCW3u1GEdK6OKB6c0VBJkjbklQHh2EtOx2tXWlvXI6ne5iYdIXNg==, tarball: file:packages/components/node_martin/stencil-solid-output-target-0.0.1.tgz}
-    id: file:packages/components/node_martin/stencil-solid-output-target-0.0.1.tgz
-    name: '@stencil/solid-output-target'
-    version: 0.0.1
-    peerDependencies:
-      '@stencil/core': '>=1.8.0'
-    dependencies:
-      '@stencil/core': 4.12.6
-    dev: true

From ed338b146109cd8916d8e3979668c3ca74225f6f Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 18 Mar 2024 15:36:08 +0100
Subject: [PATCH 23/24] Fix components broken with tagNameTransformer

---
 .../src/components/@shared/form-field-msg.tsx          |  5 +++--
 packages/components/src/components/badge/component.tsx |  3 ++-
 .../components/src/components/breadcrumb/component.tsx |  2 +-
 .../src/components/toaster/InternalToast.tsx           |  5 +++--
 packages/components/src/components/toaster/toaster.tsx | 10 +++++++++-
 packages/components/src/core/bootstrap.ts              | 10 ++++++++--
 .../react/src/components/split-button/basic.tsx        |  2 +-
 packages/samples/react/src/components/toast/basic.tsx  |  2 +-
 8 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/components/@shared/form-field-msg.tsx b/packages/components/src/components/@shared/form-field-msg.tsx
index 90a5dfaf49..4db7f5f0db 100644
--- a/packages/components/src/components/@shared/form-field-msg.tsx
+++ b/packages/components/src/components/@shared/form-field-msg.tsx
@@ -1,6 +1,7 @@
 import type { AlertPropType, HideErrorPropType, IdPropType } from '@public-ui/schema';
 import type { FunctionalComponent } from '@stencil/core';
 import { h } from '@stencil/core';
+import { KolAlertWcTag } from '../../core/component-names';
 
 type FormFieldMsgProps = {
 	_alert?: AlertPropType;
@@ -10,7 +11,7 @@ type FormFieldMsgProps = {
 };
 
 export const FormFieldMsg: FunctionalComponent<FormFieldMsgProps> = ({ _alert, _error, _hideError, _id }) => (
-	<kol-alert-wc
+	<KolAlertWcTag
 		/**
 		 * This message is read out by screen readers if the input field
 		 * refers to the message using the <code>aria-describedby</code>
@@ -27,5 +28,5 @@ export const FormFieldMsg: FunctionalComponent<FormFieldMsgProps> = ({ _alert, _
 		}}
 	>
 		{_error}
-	</kol-alert-wc>
+	</KolAlertWcTag>
 );
diff --git a/packages/components/src/components/badge/component.tsx b/packages/components/src/components/badge/component.tsx
index d116deb46f..fbab6ca5e7 100644
--- a/packages/components/src/components/badge/component.tsx
+++ b/packages/components/src/components/badge/component.tsx
@@ -1,6 +1,7 @@
 import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '@public-ui/schema';
 import { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor } from '@public-ui/schema';
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { KolSpanWcTag } from '../../core/component-names';
 
 import { nonce } from '../../utils/dev.utils';
 
@@ -50,7 +51,7 @@ export class KolBadge implements BadgeAPI {
 						color: this.colorStr,
 					}}
 				>
-					<kol-span-wc id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></kol-span-wc>
+					<KolSpanWcTag id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></KolSpanWcTag>
 					{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}
 				</span>
 			</Host>
diff --git a/packages/components/src/components/breadcrumb/component.tsx b/packages/components/src/components/breadcrumb/component.tsx
index a12ff20bd8..a1680c5eed 100644
--- a/packages/components/src/components/breadcrumb/component.tsx
+++ b/packages/components/src/components/breadcrumb/component.tsx
@@ -43,7 +43,7 @@ export class KolBreadcrumb implements BreadcrumbAPI {
 					<ul>
 						{this.state._links.length === 0 && (
 							<li>
-								<kol-icon _label="" _icons="codicon codicon-home" />…
+								<KolIconTag _label="" _icons="codicon codicon-home" />…
 							</li>
 						)}
 						{this.state._links.map(this.renderLink)}
diff --git a/packages/components/src/components/toaster/InternalToast.tsx b/packages/components/src/components/toaster/InternalToast.tsx
index 16e0755e1d..476942d2cd 100644
--- a/packages/components/src/components/toaster/InternalToast.tsx
+++ b/packages/components/src/components/toaster/InternalToast.tsx
@@ -1,5 +1,6 @@
 import type { ToastState } from '@public-ui/schema';
 import { h } from '@stencil/core';
+import { KolAlertTag } from '../../core/component-names';
 
 type Props = {
 	toastState: ToastState;
@@ -16,7 +17,7 @@ export const InternalToast = ({ toastState, onClose, key }: Props) => {
 
 	return (
 		<div class={`toast ${toastState.status}`} key={key}>
-			<kol-alert
+			<KolAlertTag
 				class="alert"
 				_alert={true}
 				_label={toastState.toast.label}
@@ -27,7 +28,7 @@ export const InternalToast = ({ toastState, onClose, key }: Props) => {
 				_on={{ onClose }}
 			>
 				<div ref={handleRef}>{typeof toastState.toast.description === 'string' ? toastState.toast.description : null}</div>
-			</kol-alert>
+			</KolAlertTag>
 		</div>
 	);
 };
diff --git a/packages/components/src/components/toaster/toaster.tsx b/packages/components/src/components/toaster/toaster.tsx
index d4bc7949b4..a8ed8fa2e3 100644
--- a/packages/components/src/components/toaster/toaster.tsx
+++ b/packages/components/src/components/toaster/toaster.tsx
@@ -1,4 +1,6 @@
 import type { Toast, ToasterOptions } from '@public-ui/schema';
+import { KolToastContainerTag } from '../../core/component-names';
+import { isInitialized } from '../../core/bootstrap';
 
 export class ToasterService {
 	private static readonly instances: Map<Document, ToasterService> = new Map<Document, ToasterService>();
@@ -9,7 +11,9 @@ export class ToasterService {
 		private readonly document: Document,
 		private readonly options?: ToasterOptions,
 	) {
-		this.toastContainerElement = this.document.createElement('kol-toast-container');
+		console.log('create', KolToastContainerTag);
+		console.trace();
+		this.toastContainerElement = this.document.createElement(KolToastContainerTag);
 		this.document.body.prepend(this.toastContainerElement);
 	}
 
@@ -17,6 +21,10 @@ export class ToasterService {
 	 * Get a toaster for the specified document environment. Each environment has exactly one instance of the service.
 	 */
 	public static getInstance(document: Document, options?: ToasterOptions): ToasterService {
+		if (!isInitialized()) {
+			throw new Error('Toaster: Call KoliBri bootstrap/register method first.');
+		}
+
 		let instance = this.instances.get(document);
 		if (!instance) {
 			instance = new ToasterService(document, options);
diff --git a/packages/components/src/core/bootstrap.ts b/packages/components/src/core/bootstrap.ts
index ae1f7f5d4e..af5c74dcb1 100644
--- a/packages/components/src/core/bootstrap.ts
+++ b/packages/components/src/core/bootstrap.ts
@@ -3,8 +3,10 @@ import { register as coreRegister } from 'adopted-style-sheets';
 import { configI18n, initI18n } from './i18n';
 import { setCustomTagNames } from './component-names';
 
+let initialized = false;
+
 type KoliBriOptions = RegisterOptions & {
-	// transformTagName?: (tagName: string) => string;
+	transformTagName?: (tagName: string) => string;
 };
 
 export const bootstrap = async (
@@ -20,7 +22,11 @@ export const bootstrap = async (
 	if (options?.transformTagName) {
 		setCustomTagNames(options?.transformTagName);
 	}
-	return await coreRegister(themes, loaders, options);
+	const coreRegisterReturnValue = await coreRegister(themes, loaders, options);
+	initialized = true;
+
+	return coreRegisterReturnValue;
 };
 
 export const register = bootstrap;
+export const isInitialized = () => initialized;
diff --git a/packages/samples/react/src/components/split-button/basic.tsx b/packages/samples/react/src/components/split-button/basic.tsx
index 1e79716cb9..d50090d83e 100644
--- a/packages/samples/react/src/components/split-button/basic.tsx
+++ b/packages/samples/react/src/components/split-button/basic.tsx
@@ -5,9 +5,9 @@ import { KolSplitButton } from '@public-ui/react';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
-const toaster = ToasterService.getInstance(document);
 
 export const SplitButtonBasic: FC = () => {
+	const toaster = ToasterService.getInstance(document);
 	const handleButtonClick = () => {
 		void toaster.enqueue({
 			description: 'The Button has been clicked.',
diff --git a/packages/samples/react/src/components/toast/basic.tsx b/packages/samples/react/src/components/toast/basic.tsx
index f51119ce50..7e101a5e51 100644
--- a/packages/samples/react/src/components/toast/basic.tsx
+++ b/packages/samples/react/src/components/toast/basic.tsx
@@ -7,9 +7,9 @@ import { getRoot } from '../../shares/react-roots';
 import { SampleDescription } from '../SampleDescription';
 
 import type { FC } from 'react';
-const toaster = ToasterService.getInstance(document);
 
 export const ToastBasic: FC = () => {
+	const toaster = ToasterService.getInstance(document);
 	const handleButtonClickSimple = () => {
 		void toaster.enqueue({
 			description: 'Toasty',

From 5f23b4a7609c2958d543bd8ce5439526d5deee82 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 18 Mar 2024 15:51:40 +0100
Subject: [PATCH 24/24] Fix handout samples

---
 .../react/src/components/abbr/basic.html      |  6 --
 .../react/src/components/handout/basic.tsx    | 62 +++++++++++++------
 2 files changed, 44 insertions(+), 24 deletions(-)
 delete mode 100644 packages/samples/react/src/components/abbr/basic.html

diff --git a/packages/samples/react/src/components/abbr/basic.html b/packages/samples/react/src/components/abbr/basic.html
deleted file mode 100644
index 1320495460..0000000000
--- a/packages/samples/react/src/components/abbr/basic.html
+++ /dev/null
@@ -1,6 +0,0 @@
-Ich bin <kol-abbr _label="Abkürzung">z.B.</kol-abbr> eine Abkürzung.<br />
-Ich bin <kol-abbr _label="Abkürzung" _tooltip-align="right">z.B.</kol-abbr> eine Abkürzung (rechts).<br />
-Ich bin
-<kol-abbr _label="Abkürzung" _tooltip-align="bottom">z.B.</kol-abbr> eine Abkürzung (unten).<br />
-Ich bin <kol-abbr _label="Abkürzung" _tooltip-align="left">z.B.</kol-abbr> eine Abkürzung (links).<br />
-Ich bin <kol-abbr _label="Abkürzung" _tooltip-align="top">z.B.</kol-abbr> eine Abkürzung (oben).
diff --git a/packages/samples/react/src/components/handout/basic.tsx b/packages/samples/react/src/components/handout/basic.tsx
index a2b3110c87..49739744b7 100644
--- a/packages/samples/react/src/components/handout/basic.tsx
+++ b/packages/samples/react/src/components/handout/basic.tsx
@@ -6,6 +6,7 @@ import {
 	KolAbbr,
 	KolAccordion,
 	KolAlert,
+	KolBadge,
 	KolBreadcrumb,
 	KolButton,
 	KolButtonLink,
@@ -39,6 +40,7 @@ import {
 import { getTheme, getThemeName } from '../../shares/store';
 
 import type { FC } from 'react';
+import { getRoot } from '../../shares/react-roots';
 const TABLE_HEADERS: KoliBriTableHeaders = {
 	horizontal: [
 		[
@@ -60,15 +62,12 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'montag',
 				label: 'Montag',
-				render: (el, data) => {
-					const button = document.createElement('kol-button');
-					button.setAttribute('_label', data.label);
-					button.setAttribute('data-theme', 'default');
-					button.setAttribute('style', 'font-size: 75%');
-					button.setAttribute('exportparts', 'button,normal');
-					button._on = { onClick: console.log };
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
 					el.innerHTML = '';
-					el.appendChild(button);
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolButton _label={cell.label} style={{ fontSize: '75%' }} data-theme="default" />);
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
@@ -87,8 +86,12 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 			{
 				key: 'dienstag',
 				label: 'Dienstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#060" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#060" _label={cell.label}></KolBadge>);
 				},
 				sort: (data) => {
 					return data.sort((first, second) => {
@@ -109,33 +112,56 @@ const TABLE_HEADERS: KoliBriTableHeaders = {
 				render: (el, data) => {
 					el.innerHTML = `<kol-badge _color="#006" _label="${data.label}"></kol-badge>`;
 				},
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#006" _label={cell.label}></KolBadge>);
+				},
 			},
 			{
 				key: 'donnerstag',
 				label: 'Donnerstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#600" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#600" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'freitag',
 				label: 'Freitag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#303" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#303" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'samstag',
 				label: 'Samstag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#330" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#330" _label={cell.label}></KolBadge>);
 				},
 			},
 			{
 				key: 'sonntag',
 				label: 'Sonntag',
-				render: (el, data) => {
-					el.innerHTML = `<kol-badge _color="#033" _label="${data.label}"></kol-badge>`;
+				render: (el, cell) => {
+					const renderElement = document.createElement('div');
+					renderElement.setAttribute('role', 'presentation');
+					el.innerHTML = '';
+					el.appendChild(renderElement);
+					getRoot(renderElement).render(<KolBadge _color="#033" _label={cell.label}></KolBadge>);
 				},
 			},
 		],