diff --git a/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap
index da468672a3..ba866a3583 100644
--- a/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap
+++ b/packages/components/src/components/combobox/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,6 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _disabled=true 1`] = `
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _accessKey="V" 1`] = `
+<kol-combobox class="kol-combobox">
+  <template shadowrootmode="open">
+    <div class="combobox">
+      <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          Label
+          <span aria-hidden="true" class="access-key-hint">
+            V
+          </span>
+        </span>
+        <div slot="input">
+          <div class="combobox__group">
+            <input accesskey="V" aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
+            <button class="combobox__icon" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-combobox>
+`;
+
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _alert=true 1`] = `
+<kol-combobox _alert="" class="kol-combobox">
+  <template shadowrootmode="open">
+    <div class="combobox">
+      <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="combobox__group">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
+            <button class="combobox__icon" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-combobox>
+`;
+
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _disabled=true 1`] = `
 <kol-combobox class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox combobox--disabled">
@@ -12,7 +61,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
         </span>
         <div slot="input">
           <div class="combobox__group">
-            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" disabled="" id="id-nonce" role="combobox" spellcheck="false" type="text" value="">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
             <button class="combobox__icon" disabled="" tabindex="-1">
               <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
             </button>
@@ -24,11 +73,11 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
 </kol-combobox>
 `;
 
-exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _hideError=false 1`] = `
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _hint="Hint" 1`] = `
 <kol-combobox class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox">
-      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+      <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
         <span slot="label">
           <span>
             Label
@@ -36,7 +85,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
         </span>
         <div slot="input">
           <div class="combobox__group">
-            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" role="combobox" spellcheck="false" type="text" value="">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-describedby="id-nonce-hint" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
             <button class="combobox__icon" tabindex="-1">
               <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
             </button>
@@ -48,11 +97,11 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
 </kol-combobox>
 `;
 
-exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _hideError=true 1`] = `
-<kol-combobox _hide-error="" class="kol-combobox">
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-combobox class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox">
-      <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
         <span slot="label">
           <span>
             Label
@@ -60,7 +109,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
         </span>
         <div slot="input">
           <div class="combobox__group">
-            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" role="combobox" spellcheck="false" type="text" value="">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
             <button class="combobox__icon" tabindex="-1">
               <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
             </button>
@@ -72,7 +121,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
 </kol-combobox>
 `;
 
-exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
 <kol-combobox class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox">
@@ -84,7 +133,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
         </span>
         <div slot="input">
           <div class="combobox__group">
-            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" role="combobox" spellcheck="false" type="text" value="">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
             <button class="combobox__icon" tabindex="-1">
               <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
             </button>
@@ -96,7 +145,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
 </kol-combobox>
 `;
 
-exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _required=false 1`] = `
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
 <kol-combobox class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox">
@@ -108,7 +157,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
         </span>
         <div slot="input">
           <div class="combobox__group">
-            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" role="combobox" spellcheck="false" type="text" value="">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
             <button class="combobox__icon" tabindex="-1">
               <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
             </button>
@@ -120,11 +169,11 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
 </kol-combobox>
 `;
 
-exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _required=true 1`] = `
-<kol-combobox class="kol-combobox">
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-combobox _hide-error="" class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox">
-      <kol-input _hint="" _id="id-nonce" _label="Label" _required="" _tooltipalign="top" role="presentation">
+      <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
         <span slot="label">
           <span>
             Label
@@ -132,7 +181,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
         </span>
         <div slot="input">
           <div class="combobox__group">
-            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" required="" role="combobox" spellcheck="false" type="text" value="">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
             <button class="combobox__icon" tabindex="-1">
               <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
             </button>
@@ -144,7 +193,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
 </kol-combobox>
 `;
 
-exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _touched=false 1`] = `
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
 <kol-combobox class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox">
@@ -156,7 +205,31 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
         </span>
         <div slot="input">
           <div class="combobox__group">
-            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" role="combobox" spellcheck="false" type="text" value="">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
+            <button class="combobox__icon" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-combobox>
+`;
+
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _readOnly=true 1`] = `
+<kol-combobox _readonly="" class="kol-combobox">
+  <template shadowrootmode="open">
+    <div class="combobox">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="combobox__group">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
             <button class="combobox__icon" tabindex="-1">
               <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
             </button>
@@ -168,7 +241,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
 </kol-combobox>
 `;
 
-exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] _touched=true 1`] = `
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] _touched=true 1`] = `
 <kol-combobox _touched="" class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox">
@@ -180,7 +253,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
         </span>
         <div slot="input">
           <div class="combobox__group">
-            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" role="combobox" spellcheck="false" type="text" value="">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
             <button class="combobox__icon" tabindex="-1">
               <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
             </button>
@@ -192,7 +265,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
 </kol-combobox>
 `;
 
-exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","Herr","Divers"] 1`] = `
+exports[`kol-combobox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Herr" _suggestions=["Frau","Herr","Divers"] 1`] = `
 <kol-combobox class="kol-combobox">
   <template shadowrootmode="open">
     <div class="combobox">
@@ -204,7 +277,7 @@ exports[`kol-combobox should render with _label="Label" _suggestions=["Frau","He
         </span>
         <div slot="input">
           <div class="combobox__group">
-            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" role="combobox" spellcheck="false" type="text" value="">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-expanded="false" aria-labelledby="id-nonce" autocapitalize="off" autocorrect="off" class="combobox__input" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" role="combobox" spellcheck="false" type="text" value="Herr">
             <button class="combobox__icon" tabindex="-1">
               <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
             </button>
diff --git a/packages/components/src/components/combobox/test/snapshot.spec.tsx b/packages/components/src/components/combobox/test/snapshot.spec.tsx
index ae7adcc666..2df1608bc4 100644
--- a/packages/components/src/components/combobox/test/snapshot.spec.tsx
+++ b/packages/components/src/components/combobox/test/snapshot.spec.tsx
@@ -1,33 +1,10 @@
 import { KolComboboxTag } from '../../../core/component-names';
 import type { ComboboxProps } from '../../../schema';
-import { executeSnapshotTests } from '../../../utils/testing';
+import { executeInputSnapshotTests } from '../../../utils/testing';
 
 import { KolCombobox } from '../shadow';
 
-const baseObj: ComboboxProps = { _label: 'Label', _suggestions: ['Frau', 'Herr', 'Divers'] };
-
-executeSnapshotTests<ComboboxProps>(
-	KolComboboxTag,
-	[KolCombobox],
-	[
-		{ ...baseObj },
-		{ ...baseObj, _hideError: false },
-		{ ...baseObj, _hideError: true },
-		{
-			...baseObj,
-			_icons: {
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			},
-		},
-		{ ...baseObj, _required: false },
-		{ ...baseObj, _required: true },
-		{ ...baseObj, _touched: false },
-		{ ...baseObj, _touched: true },
-		{ ...baseObj, _disabled: true },
-	],
-);
+executeInputSnapshotTests<ComboboxProps>(KolComboboxTag, [KolCombobox], {
+	_value: 'Herr',
+	_suggestions: ['Frau', 'Herr', 'Divers'],
+});
diff --git a/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..63451326b9
--- /dev/null
+++ b/packages/components/src/components/input-checkbox/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,1737 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _accessKey="V" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input accesskey="V" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _alert=true 1`] = `
+<kol-input-checkbox _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _disabled=true 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" disabled="" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _hint="Hint" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input aria-describedby="id-nonce-hint" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-checkbox _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _readOnly=true 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" _touched=true 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _labelAlign="left" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _accessKey="V" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input accesskey="V" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _alert=true 1`] = `
+<kol-input-checkbox _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _disabled=true 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" disabled="" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _hint="Hint" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input aria-describedby="id-nonce-hint" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-checkbox _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _readOnly=true 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" _touched=true 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="button" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _accessKey="V" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input accesskey="V" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _alert=true 1`] = `
+<kol-input-checkbox _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _disabled=true 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" disabled="" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _hint="Hint" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input aria-describedby="id-nonce-hint" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-checkbox _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _readOnly=true 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" _touched=true 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=false _variant="switch" 1`] = `
+<kol-input-checkbox _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-close" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _accessKey="V" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input accesskey="V" checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _alert=true 1`] = `
+<kol-input-checkbox _alert="" _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _disabled=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" disabled="" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _hint="Hint" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input aria-describedby="id-nonce-hint" checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-checkbox _checked="" _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _readOnly=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" _touched=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="left" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="left">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _accessKey="V" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input accesskey="V" checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _alert=true 1`] = `
+<kol-input-checkbox _alert="" _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _disabled=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" disabled="" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _hint="Hint" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input aria-describedby="id-nonce-hint" checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-checkbox _checked="" _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _readOnly=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" _touched=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _labelAlign="right" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked default" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _accessKey="V" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input accesskey="V" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _alert=true 1`] = `
+<kol-input-checkbox _alert="" _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _disabled=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" disabled="" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _hint="Hint" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input aria-describedby="id-nonce-hint" checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-checkbox _checked="" _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _readOnly=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" _touched=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="button" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="button checkbox checked" data-label-align="right" data-role="button">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element visually-hidden" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _accessKey="V" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input accesskey="V" checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _alert=true 1`] = `
+<kol-input-checkbox _alert="" _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _disabled=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" disabled="" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _hint="Hint" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input aria-describedby="id-nonce-hint" checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-checkbox _checked="" _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _readOnly=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" _touched=true 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _checked=true _variant="switch" 1`] = `
+<kol-input-checkbox _checked="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox checked switch" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-check" _label="" class="icon"></kol-icon>
+        <input checked="" class="checkbox-input-element" id="id-nonce" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _accessKey="V" 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input accesskey="V" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _alert=true 1`] = `
+<kol-input-checkbox _alert="" _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _disabled=true 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" disabled="" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _hint="Hint" 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input aria-describedby="id-nonce-hint" class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-checkbox _hide-error="" _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _readOnly=true 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true _touched=true 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
+
+exports[`kol-input-checkbox should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _indeterminate=true 1`] = `
+<kol-input-checkbox _indeterminate="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-checkbox">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="checkbox default indeterminate" data-label-align="right">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <label class="checkbox-container" slot="input">
+        <kol-icon _icons="codicon codicon-remove" _label="" class="icon"></kol-icon>
+        <input class="checkbox-input-element" id="id-nonce" indeterminate="" name="field" type="checkbox">
+      </label>
+    </kol-input>
+  </template>
+</kol-input-checkbox>
+`;
diff --git a/packages/components/src/components/input-checkbox/test/html.mock.ts b/packages/components/src/components/input-checkbox/test/html.mock.ts
deleted file mode 100644
index eb98cbc95c..0000000000
--- a/packages/components/src/components/input-checkbox/test/html.mock.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import type { InputCheckboxProps, InputCheckboxStates } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolIconTag, KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInputCheckboxHtml = (props: InputCheckboxProps): string => {
-	const state = mixMembers<InputCheckboxProps, InputCheckboxStates>(
-		{
-			_checked: false,
-			_hideError: false,
-			_icons: {
-				checked: 'codicon codicon-check',
-				indeterminate: 'codicon codicon-remove',
-				unchecked: 'codicon codicon-close',
-			},
-			_id: `id-${nonce()}`,
-			_indeterminate: false,
-			_label: '', // ⚠ required
-			_value: true,
-			_variant: 'default',
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-
-	return `
-	<kol-input-checkbox
-		class="kol-input-checkbox"
-		${state._touched ? `_touched=""` : ''}
-		${state._alert ? `_alert=""` : ''}
-	>
-		<mock:shadow-root>
-			<${KolInputTag}
-					${state._disabled ? `_disabled=""` : ''}
-					${state._hideLabel ? `_hideLabel=""` : ''}
-					${state._touched ? `_touched=""` : ''}
-					${state._required ? `_required=""` : ''}
-					data-label-align="${state._labelAlign || 'right'}"
-					_hint=""
-					_id="${state._id}"
-					_label="${state._label ? `${state._label}` : ''}"
-					_tooltipalign="top"
-					class="checkbox ${state._hideLabel ? 'hide-label' : ''} default"
-					${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-			 >
-			 <span slot="label"> ${
-					hasExpertSlot
-						? `<slot name="expert"></slot> `
-						: typeof state._accessKey === 'string'
-							? `
-						 ${state._label}
-						 <span class="access-key-hint" aria-hidden="true">
-						 ${state._accessKey}
-						 </span>
-					  `
-							: ` <span>${state._label}</span> `
-				}
-				</span>
-				<label slot="input" class="checkbox-container">
-				<${KolIconTag}
-					class="icon"
-					_icons="${state._indeterminate ? state._icons.indeterminate : state._checked ? state._icons.checked : state._icons.unchecked}"
-					_label=""
-				> </${KolIconTag}>
-				<input
-					class="checkbox-input-element${state._variant === 'button' ? ' visually-hidden' : ''}"
-					title=""
-					${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-
-					${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-					id="${state._id}"
-					type="checkbox"
-					${state._disabled ? `disabled=""` : ''}
-					${state._required ? `required=""` : ''}
-					${state._name ? `name=""` : ''}
-					${state._checked ? `checked=""` : ''}
-					${state._indeterminate ? `indeterminate=""` : ''}
-					${state._tabIndex ? `tabIndex=""` : ''}
-
-				/>
-			</label>
-	     </${KolInputTag}>
-	   </mock:shadow-root>
-	</kol-input-checkbox>`;
-};
diff --git a/packages/components/src/components/input-checkbox/test/snapshot.spec.tsx b/packages/components/src/components/input-checkbox/test/snapshot.spec.tsx
index 4302f3deae..572332ac98 100644
--- a/packages/components/src/components/input-checkbox/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-checkbox/test/snapshot.spec.tsx
@@ -1,35 +1,44 @@
-import { executeTests } from 'stencil-awesome-test';
+import { KolInputCheckboxTag } from '../../../core/component-names';
+import type { InputCheckboxProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
 
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
+import { KolInputCheckbox } from '../shadow';
 
-import { getInputCheckboxHtml } from './html.mock';
+executeInputSnapshotTests<InputCheckboxProps>(KolInputCheckboxTag, [KolInputCheckbox], {
+	_checked: false,
+	_labelAlign: 'left',
+});
 
-import type { SpecPage } from '@stencil/core/testing';
-import type { InputCheckboxProps } from '../../../schema';
-import { KolInputCheckbox } from '../shadow';
+executeInputSnapshotTests<InputCheckboxProps>(KolInputCheckboxTag, [KolInputCheckbox], {
+	_checked: true,
+	_labelAlign: 'left',
+});
+
+executeInputSnapshotTests<InputCheckboxProps>(KolInputCheckboxTag, [KolInputCheckbox], {
+	_checked: true,
+	_labelAlign: 'right',
+});
+
+executeInputSnapshotTests<InputCheckboxProps>(KolInputCheckboxTag, [KolInputCheckbox], {
+	_checked: false,
+	_variant: 'switch',
+});
+
+executeInputSnapshotTests<InputCheckboxProps>(KolInputCheckboxTag, [KolInputCheckbox], {
+	_checked: true,
+	_variant: 'switch',
+});
+
+executeInputSnapshotTests<InputCheckboxProps>(KolInputCheckboxTag, [KolInputCheckbox], {
+	_checked: false,
+	_variant: 'button',
+});
+
+executeInputSnapshotTests<InputCheckboxProps>(KolInputCheckboxTag, [KolInputCheckbox], {
+	_checked: true,
+	_variant: 'button',
+});
 
-executeTests<InputCheckboxProps>(
-	'InputCheckbox',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputCheckbox],
-			template: () => <kol-input-checkbox {...props} />,
-		});
-		return page;
-	},
-	{
-		_label: ['Label'],
-		_hideLabel: [true, false],
-		_disabled: [true, false],
-		_alert: [true, false],
-		_required: [true, false],
-		_touched: [true, false],
-		_labelAlign: [undefined, 'left'],
-	},
-	getInputCheckboxHtml,
-	{
-		execMode: 'default', // ready
-		needTimers: true,
-	},
-);
+executeInputSnapshotTests<InputCheckboxProps>(KolInputCheckboxTag, [KolInputCheckbox], {
+	_indeterminate: true,
+});
diff --git a/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..2dfd05d540
--- /dev/null
+++ b/packages/components/src/components/input-color/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,445 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _accessKey="V" 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _alert=true 1`] = `
+<kol-input-color _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _disabled=true 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _hint="Hint" 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-color _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _readOnly=true 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _accessKey="V" 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _alert=true 1`] = `
+<kol-input-color _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _disabled=true 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _hint="Hint" 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-color _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _readOnly=true 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] _touched=true 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _suggestions=["#F00","#0F0","#00F"] 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" _touched=true 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
+
+exports[`kol-input-color should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="#FFF" 1`] = `
+<kol-input-color _placeholder="Hier steht ein Platzhaltertext" class="kol-input-color">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="color" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" slot="input" spellcheck="false" type="color" value="#FFF">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-color>
+`;
diff --git a/packages/components/src/components/input-color/test/html.mock.ts b/packages/components/src/components/input-color/test/html.mock.ts
deleted file mode 100644
index 02c7200edc..0000000000
--- a/packages/components/src/components/input-color/test/html.mock.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import type { InputColorProps, InputColorStates } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInputColorHtml = (props: InputColorProps): string => {
-	const state = mixMembers<InputColorProps, InputColorStates>(
-		{
-			_autoComplete: 'off',
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-			_suggestions: [],
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-
-	return `
-	<kol-input-color
-		class="kol-input-color"
-		${state._touched ? `_touched=""` : ''}
-		${state._alert ? `_alert=""` : ''}
-	>
-		<mock:shadow-root>
-			<${KolInputTag}
-					${state._disabled ? `_disabled=""` : ''}
-					${state._hideLabel ? `_hideLabel=""` : ''}
-					${state._touched ? `_touched=""` : ''}
-					${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-					_hint=""
-					_id="${state._id}"
-					_label="${state._label ? `${state._label}` : ''}"
-					_tooltipalign="top"
-					class="color ${state._hideLabel ? 'hide-label' : ''} "
-					role="presentation"
-			 >
-			 <span slot="label"> ${
-					hasExpertSlot
-						? `<slot name="expert"></slot> `
-						: typeof state._accessKey === 'string'
-							? `
-						 ${state._label}
-						 <span class="access-key-hint" aria-hidden="true">
-						 ${state._accessKey}
-						 </span>
-					  `
-							: ` <span>${state._label}</span> `
-				}
-				</span>
-	       <div slot="input">
-	        	<input
-							${state._disabled ? `disabled=""` : ''}
-							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-							autocapitalize="off"
-							autocomplete="off"
-							autocorrect="off"
-							id="${state._id}"
-							slot="input"
-							spellcheck="false"
-							type="color"
-							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-						>
-	       </div>
-	     </${KolInputTag}>
-	   </mock:shadow-root>
-	</kol-input-color>`;
-};
diff --git a/packages/components/src/components/input-color/test/snapshot.spec.tsx b/packages/components/src/components/input-color/test/snapshot.spec.tsx
index f7928c7e79..0ae6561dd8 100644
--- a/packages/components/src/components/input-color/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-color/test/snapshot.spec.tsx
@@ -1,41 +1,24 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInputColorHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputColorTag } from '../../../core/component-names';
 import type { InputColorProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputColor } from '../shadow';
 
-executeTests<InputColorProps>(
-	'InputColor',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputColor],
-			template: () => <kol-input-color {...props} />,
-		});
-		return page;
-	},
+executeInputSnapshotTests<InputColorProps>(
+	KolInputColorTag,
+	[KolInputColor],
 	{
-		_label: ['Label'],
-		_hideLabel: [true, false],
-		_disabled: [true, false],
-		_alert: [true, false],
-		_icons: [[{ left: 'codicon codicon-home' }]],
-		_touched: [true, false],
-		_smartButton: [
-			{
-				_icons: ['codicon codicon-eye'],
-				_hideLabel: true,
-				_label: 'einblenden',
-			},
-		],
+		_value: '#FFF',
 	},
-	getInputColorHtml,
+	{ hasSmartButton: true },
+);
+
+executeInputSnapshotTests<InputColorProps>(
+	KolInputColorTag,
+	[KolInputColor],
 	{
-		execMode: 'default', // ready
-		needTimers: true,
+		_value: '#FFF',
+		_suggestions: ['#F00', '#0F0', '#00F'],
 	},
+	{ hasSmartButton: true },
 );
diff --git a/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..2761650b1d
--- /dev/null
+++ b/packages/components/src/components/input-date/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,206 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _accessKey="V" 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _alert=true 1`] = `
+<kol-input-date _alert="" _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _disabled=true 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _hint="Hint" 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-date _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _readOnly=true 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _readonly="" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" readonly="" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" _touched=true 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" _touched="" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
+
+exports[`kol-input-date should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="2025-01-01" 1`] = `
+<kol-input-date _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-input-date">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="date">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="9999-12-31" name="field" spellcheck="false" type="date" value="2025-01-01">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-date>
+`;
diff --git a/packages/components/src/components/input-date/test/html.mock.ts b/packages/components/src/components/input-date/test/html.mock.ts
deleted file mode 100644
index 7f342f9529..0000000000
--- a/packages/components/src/components/input-date/test/html.mock.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import type { InputDateProps, InputDateStates } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInputDateHtml = (props: InputDateProps): string => {
-	const state = mixMembers<InputDateProps, InputDateStates>(
-		{
-			_autoComplete: 'off',
-			_hasValue: false,
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-			_suggestions: [],
-			_type: 'datetime-local',
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-	return `
-	<kol-input-date
-		class="kol-input-date"
-		${state._touched ? `_touched=""` : ''}
-		${state._alert ? `_alert=""` : ''}
-	>
-	   <mock:shadow-root>
-	     <${KolInputTag}
-					${state._disabled ? `_disabled=""` : ''}
-					${state._hideLabel ? `_hideLabel=""` : ''}
-					${state._required ? `_required=""` : ''}
-					${state._readOnly ? `_readonly=""` : ''}
-					${state._touched ? `_touched=""` : ''}
-					${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-					_hint=""
-					_id="${state._id}"
-					_label="${state._label ? `${state._label}` : ''}"
-					_tooltipalign="top"
-					class="date ${state._hideLabel ? `hide-label` : ''}"
-			 >
-			 <span slot="label"> ${
-					hasExpertSlot
-						? `<slot name="expert"></slot> `
-						: typeof state._accessKey === 'string'
-							? `
-						 ${state._label}
-						 <span class="access-key-hint" aria-hidden="true">
-						 ${state._accessKey}
-						 </span>
-					  `
-							: ` <span>${state._label}</span> `
-				}
-				</span>
-	       <div slot="input">
-	        	<input
-							${state._disabled ? `disabled=""` : ''}
-							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-							autocapitalize="off"
-							autocomplete="off"
-							autocorrect="off"
-							id="${state._id}"
-							max=${state._max ? state._max : '9999-12-31'}
-							spellcheck="false"
-							type="date"
-							${state._readOnly ? `readonly=""` : ''}
-							${state._required ? `required=""` : ''}
-							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-						>
-	       </div>
-	     </${KolInputTag}>
-	   </mock:shadow-root>
-	</kol-input-date>`;
-};
diff --git a/packages/components/src/components/input-date/test/snapshot.spec.tsx b/packages/components/src/components/input-date/test/snapshot.spec.tsx
index ae1b9c8d15..eefd773f4a 100644
--- a/packages/components/src/components/input-date/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-date/test/snapshot.spec.tsx
@@ -1,43 +1,10 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInputDateHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputDateTag } from '../../../core/component-names';
 import type { InputDateProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputDate } from '../shadow';
 
-executeTests<InputDateProps>(
-	'InputDate',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputDate],
-			template: () => <kol-input-date {...props} />,
-		});
-		return page;
-	},
-	{
-		_label: ['Label'],
-		_hideLabel: [true, false],
-		_disabled: [true, false],
-		_alert: [true, false],
-		_readOnly: [true, false],
-		_msg: [{ _type: 'error', _description: 'Error message' }],
-		_required: [true, false],
-		_touched: [true, false],
-		_smartButton: [
-			{
-				_icons: ['codicon codicon-eye'],
-				_hideLabel: true,
-				_label: 'einblenden',
-			},
-		],
-	},
-	getInputDateHtml,
-	{
-		execMode: 'default', // ready
-		needTimers: true,
-	},
-);
+executeInputSnapshotTests<InputDateProps>(KolInputDateTag, [KolInputDate], {
+	_value: '2025-01-01',
+	// _suggestions: [ ]
+});
diff --git a/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..c0f2d2c228
--- /dev/null
+++ b/packages/components/src/components/input-email/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,445 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _accessKey="V" 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _alert=true 1`] = `
+<kol-input-email _alert="" class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _disabled=true 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _hint="Hint" 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-email _hide-error="" class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _readOnly=true 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _readonly="" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _accessKey="V" 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _alert=true 1`] = `
+<kol-input-email _alert="" class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _disabled=true 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _hint="Hint" 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-email _hide-error="" class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _readOnly=true 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _readonly="" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] _touched=true 1`] = `
+<kol-input-email _touched="" class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _suggestions=["email1@example.com","email2@example.com","email3@example.com"] 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" _touched=true 1`] = `
+<kol-input-email _touched="" class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
+
+exports[`kol-input-email should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="email@example.com" 1`] = `
+<kol-input-email class="has-value kol-input-email">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="17" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="email" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="email" value="email@example.com">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-email>
+`;
diff --git a/packages/components/src/components/input-email/test/html.mock.ts b/packages/components/src/components/input-email/test/html.mock.ts
deleted file mode 100644
index c2c1b43678..0000000000
--- a/packages/components/src/components/input-email/test/html.mock.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { InputEmailProps, InputEmailStates } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInputEmailHtml = (props: InputEmailProps): string => {
-	const state = mixMembers<InputEmailProps, InputEmailStates>(
-		{
-			_autoComplete: 'off',
-			_currentLength: 0,
-			_hasValue: false,
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-			_suggestions: [],
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-
-	return `
-	<kol-input-email
-		class="kol-input-email"
-		${state._touched ? `_touched=""` : ''}
-		${state._alert ? `_alert=""` : ''}
-	>
-	   <mock:shadow-root>
-	     <${KolInputTag}
-					${state._disabled ? `_disabled=""` : ''}
-					${state._hideLabel ? `_hideLabel=""` : ''}
-					${state._required ? `_required=""` : ''}
-					${state._readOnly ? `_readonly=""` : ''}
-					${state._touched ? `_touched=""` : ''}
-					${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-					_hint=""
-					_id="${state._id}"
-					_label="${state._label ? `${state._label}` : ''}"
-					_tooltipalign="top"
-					class="email ${state._hideLabel ? `hide-label` : ''}"
-					role="presentation"
-					_currentlength="0"
-			 >
-			 <span slot="label"> ${
-					hasExpertSlot
-						? `<slot name="expert"></slot> `
-						: typeof state._accessKey === 'string'
-							? `
-						 ${state._label}
-						 <span class="access-key-hint" aria-hidden="true">
-						 ${state._accessKey}
-						 </span>
-					  `
-							: ` <span>${state._label}</span> `
-				}
-				</span>
-	       <div slot="input">
-	        	<input
-							${state._disabled ? `disabled=""` : ''}
-							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-							autocapitalize="off"
-							autocomplete="off"
-							autocorrect="off"
-							id="${state._id}"
-							spellcheck="false"
-							type="email"
-							${state._readOnly ? `readonly=""` : ''}
-							${state._required ? `required=""` : ''}
-							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-						>
-	       </div>
-	     </${KolInputTag}>
-	   </mock:shadow-root>
-	</kol-input-email>`;
-};
diff --git a/packages/components/src/components/input-email/test/snapshot.spec.tsx b/packages/components/src/components/input-email/test/snapshot.spec.tsx
index 3e550a5aa9..1ad7c967df 100644
--- a/packages/components/src/components/input-email/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-email/test/snapshot.spec.tsx
@@ -1,44 +1,24 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInputEmailHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputEmailTag } from '../../../core/component-names';
 import type { InputEmailProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputEmail } from '../shadow';
 
-executeTests<InputEmailProps>(
-	'InputEmail',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputEmail],
-			template: () => <kol-input-email {...props} />,
-		});
-		return page;
-	},
+executeInputSnapshotTests<InputEmailProps>(
+	KolInputEmailTag,
+	[KolInputEmail],
 	{
-		_label: ['Label'],
-		_hideLabel: [true, false],
-		_disabled: [true, false],
-		_alert: [true, false],
-		_icons: [[{ left: 'codicon codicon-home' }]],
-		_readOnly: [true, false],
-		_msg: [{ _type: 'error', _description: 'Error message' }],
-		_required: [true, false],
-		_touched: [true, false],
-		_smartButton: [
-			{
-				_icons: ['codicon codicon-eye'],
-				_hideLabel: true,
-				_label: 'einblenden',
-			},
-		],
+		_value: 'email@example.com',
 	},
-	getInputEmailHtml,
+	{ hasSmartButton: true },
+);
+
+executeInputSnapshotTests<InputEmailProps>(
+	KolInputEmailTag,
+	[KolInputEmail],
 	{
-		execMode: 'default', // ready
-		needTimers: true,
+		_value: 'email@example.com',
+		_suggestions: ['email1@example.com', 'email2@example.com', 'email3@example.com'],
 	},
+	{ hasSmartButton: true },
 );
diff --git a/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..76af609cfe
--- /dev/null
+++ b/packages/components/src/components/input-file/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,223 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _accessKey="V" 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _alert=true 1`] = `
+<kol-input-file _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _disabled=true 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" disabled="" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _hint="Hint" 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-file _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _readOnly=true 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" _touched=true 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
+
+exports[`kol-input-file should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="File" 1`] = `
+<kol-input-file _placeholder="Hier steht ein Platzhaltertext" class="kol-input-file">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="file" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false" type="file" value="File">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-file>
+`;
diff --git a/packages/components/src/components/input-file/test/html.mock.ts b/packages/components/src/components/input-file/test/html.mock.ts
deleted file mode 100644
index 42b5859e42..0000000000
--- a/packages/components/src/components/input-file/test/html.mock.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import type { InputFileProps, InputFileStates } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInputFileHtml = (props: InputFileProps): string => {
-	const state = mixMembers<InputFileProps, InputFileStates>(
-		{
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-	return `
-	<kol-input-file
-		class="kol-input-file"
-		${state._touched ? `_touched=""` : ''}
-		${state._alert ? `_alert=""` : ''}
-	>
-	   <mock:shadow-root>
-	     <${KolInputTag}
-					${state._disabled ? `_disabled=""` : ''}
-					${state._hideLabel ? `_hideLabel=""` : ''}
-					${state._required ? `_required=""` : ''}
-					${state._touched ? `_touched=""` : ''}
-					${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-					_hint=""
-					_id="${state._id}"
-					_label="${state._label ? `${state._label}` : ''}"
-					_tooltipalign="top"
-					class="file ${state._hideLabel ? `hide-label` : ''}"
-					role="presentation"
-					>
-
-			 <span slot="label"> ${
-					hasExpertSlot
-						? `<slot name="expert"></slot> `
-						: typeof state._accessKey === 'string'
-							? `
-						 ${state._label}
-						 <span class="access-key-hint" aria-hidden="true">
-						 ${state._accessKey}
-						 </span>
-					  `
-							: ` <span>${state._label}</span> `
-				}
-				</span>
-	       <div slot="input">
-	        	<input
-							${state._disabled ? `disabled=""` : ''}
-							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-							autocapitalize="off"
-							autocorrect="off"
-							id="${state._id}"
-							spellcheck="false"
-							type="file"
-							${state._required ? `required=""` : ''}
-							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-						>
-	       </div>
-	     </${KolInputTag}>
-	   </mock:shadow-root>
-	</kol-input-file>`;
-};
diff --git a/packages/components/src/components/input-file/test/snapshot.spec.tsx b/packages/components/src/components/input-file/test/snapshot.spec.tsx
index dbd9600ad8..df9d660c36 100644
--- a/packages/components/src/components/input-file/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-file/test/snapshot.spec.tsx
@@ -1,42 +1,14 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInputFileHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputFileTag } from '../../../core/component-names';
 import type { InputFileProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputFile } from '../shadow';
 
-executeTests<InputFileProps>(
-	'InputFile',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputFile],
-			template: () => <kol-input-file {...props} />,
-		});
-		return page;
-	},
-	{
-		_label: ['Label'],
-		_hideLabel: [true, false],
-		_disabled: [true, false],
-		_alert: [true, false],
-		_msg: [{ _type: 'error', _description: 'Error message' }],
-		_required: [true, false],
-		_touched: [true, false],
-		_smartButton: [
-			{
-				_icons: ['codicon codicon-eye'],
-				_hideLabel: true,
-				_label: 'einblenden',
-			},
-		],
-	},
-	getInputFileHtml,
+executeInputSnapshotTests<InputFileProps>(
+	KolInputFileTag,
+	[KolInputFile],
 	{
-		execMode: 'default', // ready
-		needTimers: true,
+		_value: 'File',
 	},
+	{ hasSmartButton: true },
 );
diff --git a/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..9ffbe747f9
--- /dev/null
+++ b/packages/components/src/components/input-number/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,445 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _accessKey="V" 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _alert=true 1`] = `
+<kol-input-number _alert="" class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _disabled=true 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _hint="Hint" 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-number _hide-error="" class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _readOnly=true 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _readonly="" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _accessKey="V" 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _alert=true 1`] = `
+<kol-input-number _alert="" class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _disabled=true 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _hint="Hint" 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-number _hide-error="" class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _readOnly=true 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _readonly="" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] _touched=true 1`] = `
+<kol-input-number _touched="" class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _suggestions=[1,2,3] 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _touched=true 1`] = `
+<kol-input-number _touched="" class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
+
+exports[`kol-input-number should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" 1`] = `
+<kol-input-number class="kol-input-number">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="number">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="" min="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="number" value="">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-number>
+`;
diff --git a/packages/components/src/components/input-number/test/html.mock.ts b/packages/components/src/components/input-number/test/html.mock.ts
deleted file mode 100644
index eacafb9ade..0000000000
--- a/packages/components/src/components/input-number/test/html.mock.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import type { InputNumberProps, InputNumberStates } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInputNumberHtml = (props: InputNumberProps): string => {
-	const state = mixMembers<InputNumberProps, InputNumberStates>(
-		{
-			_autoComplete: 'off',
-			_hasValue: false,
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-			_suggestions: [],
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-
-	return `
-	<kol-input-number
-		class="kol-input-number"
-		${state._touched ? `_touched=""` : ''}
-		${state._alert ? `_alert=""` : ''}
-	>
-	   <mock:shadow-root>
-	     <${KolInputTag}
-					${state._disabled ? `_disabled=""` : ''}
-					${state._hideLabel ? `_hideLabel=""` : ''}
-					${state._touched ? `_touched=""` : ''}
-					${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-					_hint=""
-					_id="${state._id}"
-					_label="${state._label ? `${state._label}` : ''}"
-					_tooltipalign="top"
-					class="number ${state._hideLabel ? 'hide-label' : ''} "
-					${state._readOnly ? `_readonly=""` : ''}
-					${state._required ? `_required=""` : ''}
-			 >
-			 <span slot="label"> ${
-					hasExpertSlot
-						? `<slot name="expert"></slot> `
-						: typeof state._accessKey === 'string'
-							? `
-						 ${state._label}
-						 <span class="access-key-hint" aria-hidden="true">
-						 ${state._accessKey}
-						 </span>
-					  `
-							: ` <span>${state._label}</span> `
-				}
-				</span>
-	       <div slot="input">
-	        	<input
-							${state._disabled ? `disabled=""` : ''}
-							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-							autocapitalize="off"
-							autocomplete="off"
-							autocorrect="off"
-							id="${state._id}"
-							spellcheck="false"
-							type="number"
-							value=""
-							max="${state._max ? state._max : ''}"
-							min="${state._min ? state._min : ''}"
-							${state._step ? `step="${state._step}"` : ''}
-							${state._readOnly ? `readonly=""` : ''}
-							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-							${state._required ? `required=""` : ''}
-						>
-	       </div>
-	     </${KolInputTag}>
-	   </mock:shadow-root>
-	</kol-input-number>`;
-};
diff --git a/packages/components/src/components/input-number/test/snapshot.spec.tsx b/packages/components/src/components/input-number/test/snapshot.spec.tsx
index 556a8f0850..d7ed6f08a7 100644
--- a/packages/components/src/components/input-number/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-number/test/snapshot.spec.tsx
@@ -1,37 +1,24 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInputNumberHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputNumberTag } from '../../../core/component-names';
 import type { InputNumberProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputNumber } from '../shadow';
 
-executeTests<InputNumberProps>(
-	'InputNumber',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputNumber],
-			template: () => <kol-input-number {...props} />,
-		});
-		return page;
-	},
+executeInputSnapshotTests<InputNumberProps>(
+	KolInputNumberTag,
+	[KolInputNumber],
 	{
-		_label: ['Label'],
-		_alert: [true, false],
-		_icons: [[{ left: 'codicon codicon-home' }]],
-		_readOnly: [true, false],
-		_required: [true, false],
-		_touched: [true, false],
-		_max: [10],
-		_min: [10],
-		_step: [1, 2],
+		// _value: 'Value'
 	},
-	getInputNumberHtml,
+	{ hasSmartButton: true },
+);
+
+executeInputSnapshotTests<InputNumberProps>(
+	KolInputNumberTag,
+	[KolInputNumber],
 	{
-		execMode: 'default', // ready
-		needTimers: true,
+		// _value: 'Value'
+		_suggestions: [1, 2, 3],
 	},
+	{ hasSmartButton: true },
 );
diff --git a/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..38acf0f8d6
--- /dev/null
+++ b/packages/components/src/components/input-password/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,223 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _accessKey="V" 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _alert=true 1`] = `
+<kol-input-password _alert="" class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _disabled=true 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _hint="Hint" 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-password _hide-error="" class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _readOnly=true 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _readonly="" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _touched=true 1`] = `
+<kol-input-password _touched="" class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
+
+exports[`kol-input-password should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" 1`] = `
+<kol-input-password class="has-value kol-input-password">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="password" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="password" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-password>
+`;
diff --git a/packages/components/src/components/input-password/test/html.mock.ts b/packages/components/src/components/input-password/test/html.mock.ts
deleted file mode 100644
index 29ea5b380e..0000000000
--- a/packages/components/src/components/input-password/test/html.mock.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type { InputPasswordProps, InputPasswordStates } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInputPasswordHtml = (props: InputPasswordProps): string => {
-	const state = mixMembers<InputPasswordProps, InputPasswordStates>(
-		{
-			_autoComplete: 'off',
-			_currentLength: 0,
-			_hasValue: false,
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-
-	return `
-		<kol-input-password
-			class="kol-input-password"
-			${state._touched ? `_touched=""` : ''}
-			${state._alert ? `_alert=""` : ''}
-		>
-			<mock:shadow-root>
-				<${KolInputTag}
-					${state._disabled ? `_disabled=""` : ''}
-					${state._hideLabel ? `_hideLabel=""` : ''}
-					${state._touched ? `_touched=""` : ''}
-					${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-					_hint=""
-					_id="${state._id}"
-					_label="${state._label ? `${state._label}` : ''}"
-					_tooltipalign="top"
-					class="password ${state._hideLabel ? 'hide-label' : ''} "
-					role="presentation"
-					_currentlength="0"
-					${state._readOnly ? `_readonly=""` : ''}
-					${state._required ? `_required=""` : ''}
-			 >
-			 <span slot="label"> ${
-					hasExpertSlot
-						? `<slot name="expert"></slot> `
-						: typeof state._accessKey === 'string'
-							? `
-						 ${state._label}
-						 <span class="access-key-hint" aria-hidden="true">
-						 ${state._accessKey}
-						 </span>
-					  `
-							: ` <span>${state._label}</span> `
-				}
-				</span>
-	       <div slot="input">
-	        	<input
-							${state._disabled ? `disabled=""` : ''}
-							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-							autocapitalize="off"
-							autocomplete="off"
-							autocorrect="off"
-							id="${state._id}"
-							spellcheck="false"
-							type="password"
-							${state._readOnly ? `readonly=""` : ''}
-							${state._placeholder ? `placeholder="${state._placeholder}"` : ''}
-							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-							${state._required ? `required=""` : ''}
-							>
-	       </div>
-	     </${KolInputTag}>
-	   </mock:shadow-root>
-	</kol-input-password>`;
-};
diff --git a/packages/components/src/components/input-password/test/snapshot.spec.tsx b/packages/components/src/components/input-password/test/snapshot.spec.tsx
index 974a4190f8..356be58337 100644
--- a/packages/components/src/components/input-password/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-password/test/snapshot.spec.tsx
@@ -1,36 +1,14 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInputPasswordHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputPasswordTag } from '../../../core/component-names';
 import type { InputPasswordProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputPassword } from '../shadow';
 
-executeTests<InputPasswordProps>(
-	'InputPassword',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputPassword],
-			template: () => <kol-input-password {...props} />,
-		});
-		return page;
-	},
-	{
-		_label: ['Label'],
-		_disabled: [true, false],
-		_placeholder: ['Mit Icons'],
-		_alert: [true, false],
-		_icons: [[{ left: 'codicon codicon-home' }]],
-		_readOnly: [true, false],
-		_required: [true, false],
-		_touched: [true, false],
-	},
-	getInputPasswordHtml,
+executeInputSnapshotTests<InputPasswordProps>(
+	KolInputPasswordTag,
+	[KolInputPassword],
 	{
-		execMode: 'default', // ready
-		needTimers: true,
+		_value: 'Value',
 	},
+	{ hasSmartButton: true },
 );
diff --git a/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..1771f2fd5f
--- /dev/null
+++ b/packages/components/src/components/input-radio/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,1255 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _accessKey="V" 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _accesskey="V" _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input accesskey="V" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _accesskey="V" _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input accesskey="V" id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _accesskey="V" _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input accesskey="V" id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _alert=true 1`] = `
+<kol-input-radio _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _disabled=true 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="disabled fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _disabled="" _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input disabled="" id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _disabled="" _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input disabled="" id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _hint="Hint" 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input aria-describedby="id-nonce-hint" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input aria-describedby="id-nonce-hint" id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input aria-describedby="id-nonce-hint" id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <span class="hint">
+        Hint
+      </span>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-radio _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset hidden-error vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _accessKey="V" 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _accesskey="V" _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input accesskey="V" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _accesskey="V" _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input accesskey="V" id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _accesskey="V" _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input accesskey="V" id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _alert=true 1`] = `
+<kol-input-radio _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _disabled=true 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="disabled fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _disabled="" _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input disabled="" id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _disabled="" _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input disabled="" id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _hint="Hint" 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input aria-describedby="id-nonce-hint" disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input aria-describedby="id-nonce-hint" id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input aria-describedby="id-nonce-hint" id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <span class="hint">
+        Hint
+      </span>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-radio _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset hidden-error horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _readOnly=true 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" _touched=true 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" _touched="" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" _touched="" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" _touched="" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _orientation="horizontal" 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset horizontal">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _readOnly=true 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _touched=true 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" _touched="" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" _touched="" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" _touched="" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
+
+exports[`kol-input-radio should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] 1`] = `
+<kol-input-radio _placeholder="Hier steht ein Platzhaltertext" class="kol-input-radio">
+  <template shadowrootmode="open">
+    <fieldset class="fieldset vertical">
+      <legend class="block leading-normal mb-1 w-full">
+        <span>
+          <span slot="label">
+            Label
+          </span>
+        </span>
+      </legend>
+      <kol-input _disabled="" _id="id-nonce-0" _label="Frau" _rendernolabel="" _slotname="radio-0" _tooltipalign="top" class="disabled radio">
+        <div class="radio-input-wrapper" slot="radio-0">
+          <input disabled="" id="id-nonce-0" name="field" type="radio" value="-0">
+          <label class="radio-label" htmlfor="id-nonce-0">
+            <span>
+              <span class="radio-label-span-inner">
+                Frau
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-1" _label="Herr" _rendernolabel="" _slotname="radio-1" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-1">
+          <input id="id-nonce-1" name="field" type="radio" value="-1">
+          <label class="radio-label" htmlfor="id-nonce-1">
+            <span>
+              <span class="radio-label-span-inner">
+                Herr
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+      <kol-input _id="id-nonce-2" _label="Divers" _rendernolabel="" _slotname="radio-2" _tooltipalign="top" class="radio">
+        <div class="radio-input-wrapper" slot="radio-2">
+          <input id="id-nonce-2" name="field" type="radio" value="-2">
+          <label class="radio-label" htmlfor="id-nonce-2">
+            <span>
+              <span class="radio-label-span-inner">
+                Divers
+              </span>
+            </span>
+          </label>
+        </div>
+      </kol-input>
+    </fieldset>
+  </template>
+</kol-input-radio>
+`;
diff --git a/packages/components/src/components/input-radio/test/html.mock.ts b/packages/components/src/components/input-radio/test/html.mock.ts
deleted file mode 100644
index 95e155558f..0000000000
--- a/packages/components/src/components/input-radio/test/html.mock.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import type { InputRadioProps, InputRadioStates } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInputRadioHtml = (props: InputRadioProps): string => {
-	const state = mixMembers<InputRadioProps, InputRadioStates>(
-		{
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-			_options: [],
-			_orientation: 'vertical',
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy, hasError } = getRenderStates(state);
-	const label = state._label ? state._label : '';
-	let accessKey = state._accessKey ? state._accessKey : '';
-	let [first, ...rest] = label.split(accessKey);
-	if (rest.length === 0) {
-		accessKey = accessKey.toUpperCase();
-		[first, ...rest] = label.split(accessKey);
-	}
-	if (rest.length === 0) {
-		accessKey = accessKey.toLowerCase();
-		[first, ...rest] = label.split(accessKey);
-	}
-
-	const hasHint = typeof state._hint === 'string' && state._hint.length > 0;
-
-	return `
-	<kol-input-radio
-		class="kol-input-radio"
-		${state._touched ? `_touched=""` : ''}
-		${state._alert ? `_alert=""` : ''}
-	>
-	  <mock:shadow-root>
-			<fieldset class="${state._required ? 'required' : ''}  ${state._disabled ? 'disabled' : ''} ${hasError ? 'error' : ''}   ${state._hideError ? 'hidden-error' : ''} fieldset vertical">
-				<legend class="block w-full mb-1 leading-normal">
-					<span>
-						<span slot="label">
-							${
-								hasExpertSlot
-									? `<slot name="expert"></slot> `
-									: typeof state._accessKey === 'string'
-										? `
-										<>
-										${first}
-										${
-											rest.length
-												? `<>
-												<u>{accessKey}</u>
-												{rest.join(accessKey)}
-											</>`
-												: null
-										}
-									</>
-										</span>
-										`
-										: ` ${state._label}`
-							}
-						</span>
-					</span>
-				</legend>
-
-				${state._options
-					.map((option, index) => {
-						const customId = `${state._id}-${index}`;
-						const slotName = `radio-${index}`;
-						const selected = state._value === option.value;
-						return `<${KolInputTag}
-							class=" radio ${state._disabled || option.disabled ? 'disabled' : ''} "
-							${state._disabled || option.disabled ? "_disabled=''" : ''}
-							${state._hideLabel ? "_hideLabel=''" : ''}
-							${state._touched ? "_touched=''" : ''}
-							${option.hint ? `_hint="${option.hint}"` : ''}
-							_id="${customId}"
-							${(option.label as string) ? `_label="${option.label}"` : ''}
-							_renderNoLabel=""
-							${state._required ? "_required=''" : ''}
-							_slotName="${slotName}"
-							_tooltipAlign="top"
-						>
-							<div slot="${slotName}" class="radio-input-wrapper">
-								<input
-									title=""
-									${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-									${state._hideLabel && typeof option.label === 'string' ? `aria-label="${option.label}"` : ''}
-									type="radio"
-									id="${customId}"
-									name="${state._name || state._id}"
-									${state._disabled || option.disabled ? "disabled=''" : ''}
-									${state._required ? "required=''" : ''}
-									${state._tabIndex ? `tabIndex="${state._tabIndex}"` : ''}
-									${selected ? `checked=""` : ''}
-
-									value="-${index}"
-								/>
-								<label
-									class="radio-label"
-									htmlFor="${customId}"
-									style="{
-										 ${state._hideLabel ? 'height:0 ' : ''},
-										${state._hideLabel ? 'margin:0' : ''},
-										 ${state._hideLabel ? 'padding:0' : ''},
-										${state._hideLabel ? 'visibility: hidden' : ''},
-									}"
-								>
-									<span>
-										<span class="radio-label-span-inner">${option.label}</span>
-									</span>
-								</label>
-							</div>
-						</${KolInputTag}>`;
-					})
-					.join(' ')}
-				${hasError ? `<FormFieldMsg ${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''} _hideError={state._hideError} _msg={state._msg} _id={state._id} />` : ''}
-				${
-					hasHint
-						? `
-						<span class="hint" id="${state._id}-hint">
-							${state._hint}
-						</span>`
-						: ''
-				}
-
-	    </fieldset>
-	  </mock:shadow-root>
-	</kol-input-radio>`;
-};
diff --git a/packages/components/src/components/input-radio/test/snapshot.spec.tsx b/packages/components/src/components/input-radio/test/snapshot.spec.tsx
index 5f6d7ba0d4..393681fd5e 100644
--- a/packages/components/src/components/input-radio/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-radio/test/snapshot.spec.tsx
@@ -1,40 +1,32 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInputRadioHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputRadioTag } from '../../../core/component-names';
 import type { InputRadioProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputRadio } from '../shadow';
 
-executeTests<InputRadioProps>(
-	'InputRadio',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputRadio],
-			template: () => <kol-input-radio {...props} />,
-		});
-		return page;
+const options = [
+	{
+		label: 'Frau',
+		value: 'Frau',
+		disabled: true,
 	},
 	{
-		_label: ['Label'],
-		_disabled: [true, false],
-		_alert: [true, false],
-		_required: [true, false],
-		_touched: [true, false],
-		_options: [
-			[
-				{ label: 'Field 1', value: 1 },
-				{ label: 'Field 2', value: 2, hint: 'description' },
-			],
-			[{ label: 'Field 1', value: { id: 1, name: 'Option 1' } }],
-		],
+		label: 'Herr',
+		value: 'Herr',
 	},
-	getInputRadioHtml,
 	{
-		execMode: 'default', // ready
-		needTimers: true,
+		label: 'Divers',
+		value: 'Divers',
 	},
-);
+];
+
+executeInputSnapshotTests<InputRadioProps>(KolInputRadioTag, [KolInputRadio], {
+	_value: 'Value',
+	_options: options,
+});
+
+executeInputSnapshotTests<InputRadioProps>(KolInputRadioTag, [KolInputRadio], {
+	_value: 'Value',
+	_options: options,
+	_orientation: 'horizontal',
+});
diff --git a/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..39c8e3b36d
--- /dev/null
+++ b/packages/components/src/components/input-range/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,627 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _accessKey="V" 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input accesskey="V" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _alert=true 1`] = `
+<kol-input-range _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _disabled=true 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _hint="Hint" 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-describedby="id-nonce-hint" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-range _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _readOnly=true 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _accessKey="V" 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input accesskey="V" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _alert=true 1`] = `
+<kol-input-range _alert="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _disabled=true 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _hint="Hint" 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-describedby="id-nonce-hint" aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-range _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _readOnly=true 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] _touched=true 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _suggestions=[1,2,3,4,5,6,7,8,9,10] 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" list="id-nonce-list" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" list="id-nonce-list" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+        <datalist id="id-nonce-list">
+          <option value="1"></option>
+          <option value="2"></option>
+          <option value="3"></option>
+          <option value="4"></option>
+          <option value="5"></option>
+          <option value="6"></option>
+          <option value="7"></option>
+          <option value="8"></option>
+          <option value="9"></option>
+          <option value="10"></option>
+        </datalist>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 _touched=true 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" _touched="" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
+
+exports[`kol-input-range should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value=5 _min=1 _max=10 _step=1 1`] = `
+<kol-input-range _placeholder="Hier steht ein Platzhaltertext" class="kol-input-range">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="range">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <div class="inputs-wrapper" style="--kolibri-input-range--input-number--width: 2.5em;">
+          <input aria-hidden="true" autocapitalize="off" autocomplete="off" autocorrect="off" max="10" min="1" name="field-range" spellcheck="false" step="1" tabindex="-1" type="range" value="5">
+          <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" max="10" min="1" name="field-number" step="1" type="number" value="5">
+        </div>
+      </div>
+    </kol-input>
+  </template>
+</kol-input-range>
+`;
diff --git a/packages/components/src/components/input-range/test/html.mock.ts b/packages/components/src/components/input-range/test/html.mock.ts
deleted file mode 100644
index 7b02da40ea..0000000000
--- a/packages/components/src/components/input-range/test/html.mock.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import type { InputRangeStates, InputRangeProps } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInpuRangeHtml = (props: InputRangeProps): string => {
-	const state = mixMembers<InputRangeProps, InputRangeStates>(
-		{
-			_autoComplete: 'off',
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-			_suggestions: [],
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-
-	return `
-	<kol-input-range
-	 	class="kol-input-range"
-		${state._touched ? `_touched=""` : ''}
-		${state._alert ? `_alert=""` : ''}
-	>
-	   <mock:shadow-root>
-	     <${KolInputTag}
-					${state._disabled ? `_disabled=""` : ''}
-					${state._hideLabel ? `_hideLabel=""` : ''}
-					${state._touched ? `_touched=""` : ''}
-					${state._accessKey ? `_accessKey="${state._accessKey}"` : ''}
-					${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-					_hint=""
-					_id="${state._id}"
-					_label="${state._label ? `${state._label}` : ''}"
-					_tooltipalign="top"
-					class="range ${state._hideLabel ? 'hide-label' : ''} "
-
-			 >
-			 <span slot="label"> ${
-					hasExpertSlot
-						? `<slot name="expert"></slot> `
-						: typeof state._accessKey === 'string'
-							? `
-						 ${state._label}
-						 <span class="access-key-hint" aria-hidden="true">
-						 ${state._accessKey}
-						 </span>
-					  `
-							: ` <span>${state._label}</span> `
-				}
-				</span>
-	       <div slot="input">
-				 <div
-							class="inputs-wrapper"
-							${state._max ? `style="--kolibri-input-range--input-number--width: ${`${state._max}`.length + 0.5 + 'em'}"` : "style='--kolibri-input-range--input-number--width: 9.5em;'"}
-						>
-	        	<input
-							${state._disabled ? `disabled=""` : ''}
-							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-							autocapitalize="off"
-							autocomplete="off"
-							autocorrect="off"
-							spellcheck="false"
-							${state._max ? `max="${state._max}"` : ''}
-							${state._min ? `min="${state._min}"` : ''}
-							aria-hidden="true"
-							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-							${state._accessKey ? `accessKey="${state._accessKey}"` : ''}
-							tabindex="-1" type="range"
-							>
-							<input
-							${state._disabled ? `disabled=""` : ''}
-							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-							autocapitalize="off"
-							autocomplete="off"
-							autocorrect="off"
-							${state._max ? `max="${state._max}"` : ''}
-							${state._min ? `min="${state._min}"` : ''}
-							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-							${state._accessKey ? `accessKey="${state._accessKey}"` : ''}
-							type="number"
-							id="${state._id}"
-							>
-	       </div>
-				 </div>
-	     </${KolInputTag}>
-	   </mock:shadow-root>
-	</kol-input-range>`;
-};
diff --git a/packages/components/src/components/input-range/test/snapshot.spec.tsx b/packages/components/src/components/input-range/test/snapshot.spec.tsx
index 5854a19e99..a976264171 100644
--- a/packages/components/src/components/input-range/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-range/test/snapshot.spec.tsx
@@ -1,36 +1,20 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInpuRangeHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputRangeTag } from '../../../core/component-names';
 import type { InputRangeProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputRange } from '../shadow';
 
-executeTests<InputRangeProps>(
-	'InputText',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputRange],
-			template: () => <kol-input-range {...props} />,
-		});
-		return page;
-	},
-	{
-		_label: ['Label'],
-		_disabled: [true, false],
-		_alert: [true, false],
-		_icons: [[{ left: 'codicon codicon-home' }]],
-		_touched: [true, false],
-		_accessKey: ['V'],
-		_max: [10],
-		_min: [10],
-	},
-	getInpuRangeHtml,
-	{
-		execMode: 'default', // ready
-		needTimers: true,
-	},
-);
+executeInputSnapshotTests<InputRangeProps>(KolInputRangeTag, [KolInputRange], {
+	_value: 5,
+	_min: 1,
+	_max: 10,
+	_step: 1,
+});
+
+executeInputSnapshotTests<InputRangeProps>(KolInputRangeTag, [KolInputRange], {
+	_value: 5,
+	_min: 1,
+	_max: 10,
+	_step: 1,
+	_suggestions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
+});
diff --git a/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..31a56eafb9
--- /dev/null
+++ b/packages/components/src/components/input-text/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,223 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _accessKey="V" 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <input accesskey="V" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _alert=true 1`] = `
+<kol-input-text _alert="" class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _disabled=true 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _hint="Hint" 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input aria-describedby="id-nonce-hint" autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input-text _hide-error="" class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _readOnly=true 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _readonly="" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" _touched=true 1`] = `
+<kol-input-text _touched="" class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
+
+exports[`kol-input-text should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _value="Value" 1`] = `
+<kol-input-text class="has-value kol-input-text">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="text" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <input autocapitalize="off" autocomplete="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="Value">
+      </div>
+    </kol-input>
+  </template>
+</kol-input-text>
+`;
diff --git a/packages/components/src/components/input-text/test/html.mock.ts b/packages/components/src/components/input-text/test/html.mock.ts
deleted file mode 100644
index df1d79508d..0000000000
--- a/packages/components/src/components/input-text/test/html.mock.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-import type { InputTextProps, InputTextStates } from '../../../schema';
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-import { showExpertSlot } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-
-export const getInpuTextHtml = (props: InputTextProps): string => {
-	const state = mixMembers<InputTextProps, InputTextStates>(
-		{
-			_autoComplete: 'off',
-			_currentLength: 0,
-			_hasValue: false,
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-			_suggestions: [],
-			_type: 'text',
-		},
-		props,
-	);
-	const hasExpertSlot = showExpertSlot(state._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-
-	return `
-	<kol-input-text
-		class="kol-input-text"
-		${state._touched ? `_touched=""` : ''}
-		${state._alert ? `_alert=""` : ''}
-	>
-		<mock:shadow-root>
-			<${KolInputTag}
-					${state._disabled ? `_disabled=""` : ''}
-					${state._hideLabel ? `_hideLabel=""` : ''}
-					${state._touched ? `_touched=""` : ''}
-					${state._accessKey ? `_accessKey="${state._accessKey}"` : ''}
-					${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-					_hint=""
-					_id="${state._id}"
-					_label="${state._label ? `${state._label}` : ''}"
-					_tooltipalign="top"
-					class="${state._type} ${state._hideLabel ? 'hide-label' : ''} "
-					role="presentation"
-					_currentlength="0"
-					${state._readOnly ? `_readonly=""` : ''}
-					${state._required ? `_required=""` : ''}
-			 >
-			 <span slot="label"> ${
-					hasExpertSlot
-						? `<slot name="expert"></slot> `
-						: typeof state._accessKey === 'string'
-							? `
-						 ${state._label}
-						 <span class="access-key-hint" aria-hidden="true">
-						 ${state._accessKey}
-						 </span>
-					  `
-							: ` <span>${state._label}</span> `
-				}</span>
-	       <div slot="input">
-	        	<input
-							${state._disabled ? `disabled=""` : ''}
-							${state._hideLabel && typeof state._label === 'string' ? `aria-label="${state._label}"` : ''}
-							autocapitalize="off"
-							autocomplete="off"
-							autocorrect="off"
-							id="${state._id}"
-							spellcheck="false"
-							type="${state._type}"
-							${state._readOnly ? `readonly=""` : ''}
-							${state._placeholder ? `placeholder="${state._placeholder}"` : ''}
-							${ariaDescribedBy.length > 0 ? `aria-describedby="${ariaDescribedBy.join(' ')}"` : ''}
-							${state._required ? `required=""` : ''}
-							${state._accessKey ? `accessKey="${state._accessKey}"` : ''}
-							>
-	       </div>
-	     </${KolInputTag}>
-	   </mock:shadow-root>
-	</kol-input-text>`;
-};
diff --git a/packages/components/src/components/input-text/test/snapshot.spec.tsx b/packages/components/src/components/input-text/test/snapshot.spec.tsx
index 714efc4fbf..4c453a8cf2 100644
--- a/packages/components/src/components/input-text/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input-text/test/snapshot.spec.tsx
@@ -1,38 +1,14 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInpuTextHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputTextTag } from '../../../core/component-names';
 import type { InputTextProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputText } from '../shadow';
 
-executeTests<InputTextProps>(
-	'InputText',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputText],
-			template: () => <kol-input-text {...props} />,
-		});
-		return page;
-	},
-	{
-		_label: ['Label'],
-		_disabled: [true, false],
-		_placeholder: ['Mit Icons'],
-		_alert: [true, false],
-		_icons: [[{ left: 'codicon codicon-home' }]],
-		_readOnly: [true, false],
-		_required: [true, false],
-		_touched: [true, false],
-		_type: ['search', 'text'],
-		_accessKey: ['V'],
-	},
-	getInpuTextHtml,
+executeInputSnapshotTests<InputTextProps>(
+	KolInputTextTag,
+	[KolInputText],
 	{
-		execMode: 'default', // ready
-		needTimers: true,
+		_value: 'Value',
 	},
+	{ hasSmartButton: true },
 );
diff --git a/packages/components/src/components/input/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/input/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..0816c1ab89
--- /dev/null
+++ b/packages/components/src/components/input/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,165 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _accessKey="V" 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _alert=true 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _disabled=true 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="disabled kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _hint="Hint" 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <span class="hint" id="undefined-hint">
+    Hint
+  </span>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="icon-left icon-right input">
+    <kol-icon _icons="codicon codicon-arrow-left" _label=""></kol-icon>
+    <div class="input-slot" id="input"></div>
+    <kol-icon _icons="codicon codicon-arrow-right" _label=""></kol-icon>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="icon-left input">
+    <kol-icon _icons="codicon codicon-arrow-left" _label=""></kol-icon>
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="icon-right input">
+    <div class="input-slot" id="input"></div>
+    <kol-icon _icons="codicon codicon-arrow-right" _label=""></kol-icon>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="hidden-error kol-input msg-type-error">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input msg-type-error">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _readOnly=true 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input read-only">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _smartButton={"_icons":["codicon codicon-eye"],"_hideLabel":true,"_label":"einblenden"} 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+    <kol-button-wc _hidelabel="" _label="einblenden"></kol-button-wc>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _touched=true 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input touched">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
+
+exports[`kol-input should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" 1`] = `
+<kol-input _name="field" _placeholder="Hier steht ein Platzhaltertext" class="kol-input">
+  <!---->
+  <label class="input-label" id="undefined-label">
+    <span class="input-label-span"></span>
+  </label>
+  <div class="input">
+    <div class="input-slot" id="input"></div>
+  </div>
+</kol-input>
+`;
diff --git a/packages/components/src/components/input/test/html.mock.ts b/packages/components/src/components/input/test/html.mock.ts
deleted file mode 100644
index afd85ccd74..0000000000
--- a/packages/components/src/components/input/test/html.mock.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import type { InputProps } from '../../../schema';
-import { showExpertSlot } from '../../../schema';
-import { KolIconTag, KolTooltipWcTag, KolButtonWcTag } from '../../../core/component-names';
-import { translate } from '../../../i18n';
-import type { W3CInputValue, KoliBriCustomIcon } from '../../../schema';
-export const getInputHtml = (props: InputProps): string => {
-	const isMessageValidError = Boolean(props._msg?._type === 'error' && props._msg._description && props._msg._description?.length > 0);
-	const hasError = !props._readOnly && isMessageValidError && props._touched === true;
-	const showFormFieldMsg = Boolean(hasError || (props._msg?._type !== 'error' && props._msg?._description));
-	const hasExpertSlot = showExpertSlot(props._label);
-	const hasHint = typeof props._hint === 'string' && props._hint.length > 0;
-	const useTooltopInsteadOfLabel = !hasExpertSlot && props._hideLabel;
-	return `
-	<kol-input class="kol-input ${props._readOnly ? 'read-only' : ''} ${props._disabled ? 'disabled' : ''}" >
-		<label class="input-label" ${props._id ? `htmlfor="${props._id}"` : ''} id="${!useTooltopInsteadOfLabel ? `${props._id}-label` : ''}" ${useTooltopInsteadOfLabel ? `hidden=""` : ''}>
-			<span class="input-label-span"></span>
-		</label>
-
-		${
-			hasHint
-				? `
-				<span class="hint" id="${props._id}-hint">
-				${props._hint}
-					</span>`
-				: ''
-		}
-		<div class="input">
-		${props._icons?.left ? `<${KolIconTag} _label="" _icons=${(props._icons?.left as KoliBriCustomIcon).icon} ></${KolIconTag}>` : ''}
-		<div class="input-slot" id="input"></div>
-		${
-			typeof props._smartButton === 'object' && props._smartButton !== null
-				? `<${KolButtonWcTag}
-				${props._smartButton._customClass ? `_customClass="${props._smartButton._customClass}"` : ''}
-				${props._smartButton._disabled ? `_disabled=""` : ''}
-				${props._smartButton._hideLabel ? `_hideLabel=""` : ''}
-				${props._smartButton._id ? `_id="${props._smartButton._id}"` : ''}
-				${props._smartButton._label ? `_label="${props._smartButton._label}"` : ''}
-				${props._smartButton._tooltipAlign ? `_tooltipAlign="${props._smartButton._tooltipAlign}"` : ''}
-				${props._smartButton._variant ? `_variant="${props._smartButton._variant}"` : ''}
-			></${KolButtonWcTag}>`
-				: ''
-		}
-		</div>
-		${
-			useTooltopInsteadOfLabel
-				? `<${KolTooltipWcTag}
-				aria-hidden="true"
-				class="input-tooltip"
-				_align="top"
-				_id="${props._hideLabel ? `${props._id}-label` : ''}"
-				${props._label ? `_label="${props._label}"` : ''}
-			></${KolTooltipWcTag}>`
-				: ''
-		}
-		${showFormFieldMsg ? `<FormFieldMsg _alert={props._alert} _hideError={props._hideError} _msg={props._msg} _id={props._id} />` : ''}
-				${
-					Array.isArray(props._suggestions) && props._suggestions.length > 0
-						? `<datalist id="${props._id}-list">
-						${props._suggestions.map((option: W3CInputValue) => `<option value=${option} />`).join('')}
-					</datalist>`
-						: ''
-				}
-				${
-					props._hasCounter
-						? `<span class="counter" aria-atomic="true" aria-live="polite">
-						${props._currentLength}
-						${
-							props._maxLength
-								? `<>
-								<span aria-label="${translate('kol-of')}" role="img">
-
-								</span>
-								{props._maxLength}
-							</>`
-								: ''
-						}{' '}
-						<span>${translate('kol-characters')}</span>
-					</span>`
-						: ''
-				}
-	</kol-input>`;
-};
diff --git a/packages/components/src/components/input/test/snapshot.spec.tsx b/packages/components/src/components/input/test/snapshot.spec.tsx
index 6ba28c2c86..8df1cf32a1 100644
--- a/packages/components/src/components/input/test/snapshot.spec.tsx
+++ b/packages/components/src/components/input/test/snapshot.spec.tsx
@@ -1,38 +1,7 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getInputHtml } from './html.mock';
-
-import type { SpecPage } from '@stencil/core/testing';
+import { KolInputTag } from '../../../core/component-names';
 import type { InputProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolInputWc } from '../component';
 
-executeTests<InputProps>(
-	'Input',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolInputWc],
-			template: () => <kol-input {...props} />,
-		});
-		return page;
-	},
-	{
-		_id: ['Id'],
-		_label: ['Label'],
-		_hideLabel: [true, false],
-		_disabled: [true, false],
-		_alert: [true, false],
-		_icons: [[{ left: 'codicon codicon-home' }]],
-		_readOnly: [true, false],
-		_smartButton: [
-			{
-				_icons: ['codicon codicon-eye'],
-				_hideLabel: true,
-				_label: 'einblenden',
-			},
-		],
-	},
-	getInputHtml,
-);
+executeInputSnapshotTests<InputProps>(KolInputTag, [KolInputWc], {}, { hasSmartButton: true });
diff --git a/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..0f377f0a14
--- /dev/null
+++ b/packages/components/src/components/select/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,723 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _accessKey="V" 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select accesskey="V" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _alert=true 1`] = `
+<kol-select _alert="" _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _disabled=true 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" disabled="" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _hint="Hint" 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-select _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _accessKey="V" 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select accesskey="V" autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _alert=true 1`] = `
+<kol-select _alert="" _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _disabled=true 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" disabled="" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _hint="Hint" 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-select _hide-error="" _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _readOnly=true 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true _touched=true 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" _touched="" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _multiple=true 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" multiple="" name="field" spellcheck="false">
+            <option disabled="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _readOnly=true 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" _readonly="" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _touched=true 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" _touched="" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
+
+exports[`kol-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] 1`] = `
+<kol-select _placeholder="Hier steht ein Platzhaltertext" class="has-value kol-select">
+  <template shadowrootmode="open">
+    <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="select" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input">
+        <form>
+          <input hidden="" type="submit">
+          <select autocapitalize="off" autocorrect="off" id="id-nonce" name="field" spellcheck="false">
+            <option disabled="" selected="" value="-0">
+              Frau
+            </option>
+            <option value="-1">
+              Herr
+            </option>
+            <option value="-2">
+              Divers
+            </option>
+          </select>
+        </form>
+      </div>
+    </kol-input>
+  </template>
+</kol-select>
+`;
diff --git a/packages/components/src/components/select/test/html.mock.ts b/packages/components/src/components/select/test/html.mock.ts
deleted file mode 100644
index 40cd31e62a..0000000000
--- a/packages/components/src/components/select/test/html.mock.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-import { nonce } from '../../../utils/dev.utils';
-
-import { type SelectProps, type SelectStates, showExpertSlot, type W3CInputValue, type Option } from '../../../schema';
-import { KolInputTag } from '../../../core/component-names';
-
-export const getSelectHtml = (props: SelectProps): string => {
-	const state = mixMembers<SelectProps, SelectStates>(
-		{
-			_hasValue: true,
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-			_multiple: false,
-			_options: [],
-			_value: [],
-		},
-		props,
-	);
-
-	const hasExpertSlot = showExpertSlot(state._label);
-	const isSelected = (valueList: unknown[] | null, optionValue: unknown): boolean => {
-		return Array.isArray(valueList) && valueList.includes(optionValue);
-	};
-	return `
-<kol-select
-	${state._alert ? `_alert=""` : ''}
-	${state._hideError ? '_hide-error=""' : ''}
-	class="${state._hasValue ? 'has-value kol-select' : 'kol-select'}"
-	${state._touched ? ' _touched=""' : ''}
->
-	<mock:shadow-root>
-		<${KolInputTag}
-			${state._hideError ? '_hideerror=""' : ''}
-			_hint=""
-			_id="id-nonce"
-			_label="${typeof state._label === 'string' ? state._label : ''}"
-			_tooltipalign="top"
-			class="select"
-			role="presentation"
-			${state._required ? ' _required=""' : ''}
-			${state._touched ? ' _touched=""' : ''}
-			${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-		>
-			<span slot="label">
-				${
-					hasExpertSlot
-						? `<slot name="expert"></slot>`
-						: typeof state._accessKey === 'string'
-							? `<>
-						<InternalUnderlinedAccessKey accessKey="${state._accessKey}" label="${state._label}" />{' '}
-						<span class="access-key-hint" aria-hidden="true">
-							${state._accessKey}
-						</span>
-					</>`
-							: `<span>${state._label}</span>`
-				}
-			</span>
-			<div slot="input">
-			<form>
-			<input type="submit" hidden="" />
-				<select ${state._required ? ' required=""' : ''} ${state._multiple ? ' multiple=""' : ''} autocapitalize="off" autocorrect="off" id="id-nonce" spellcheck="false">
-						${state._options
-							.map((option, index) => {
-								const key = `-${index}`;
-								return `
-								<option
-									${option.disabled ? 'disabled=""' : ''}
-									value="${key}"
-									${isSelected(state._value, (option as unknown as Option<W3CInputValue>).value) || (state._multiple === false && index === 0) ? 'selected=""' : ''}
-								>
-									${option.label}
-								</option>`;
-							})
-							.join('')}
-					</select>
-				<form>
-			</div>
-		</${KolInputTag}t>
-	</mock:shadow-root>
-</kol-select>`;
-};
diff --git a/packages/components/src/components/select/test/snapshot.spec.tsx b/packages/components/src/components/select/test/snapshot.spec.tsx
index 2192459aaa..1242c2b9fc 100644
--- a/packages/components/src/components/select/test/snapshot.spec.tsx
+++ b/packages/components/src/components/select/test/snapshot.spec.tsx
@@ -1,60 +1,30 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getSelectHtml } from './html.mock';
-
+import { KolSelectTag } from '../../../core/component-names';
 import type { SelectProps } from '../../../schema';
-import type { SpecPage } from '@stencil/core/testing';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolSelect } from '../shadow';
 
-executeTests<SelectProps>(
-	'Tabs',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolSelect],
-			template: () => <kol-select {...props} />,
-		});
-		return page;
+const options = [
+	{
+		label: 'Frau',
+		value: 'Frau',
+		disabled: true,
 	},
 	{
-		_hideError: [false, true],
-		_options: [
-			[
-				{
-					label: 'Frau',
-					value: 'Frau',
-					disabled: true,
-				},
-				{
-					label: 'Herr',
-					value: 'Herr',
-				},
-				{
-					label: 'Divers',
-					value: 'Divers',
-				},
-			],
-		],
-		_icons: [
-			{
-				left: {
-					icon: 'codicon codicon-arrow-left',
-				},
-				right: {
-					icon: 'codicon codicon-arrow-right',
-				},
-			},
-		],
-		_multiple: [false, true],
-		_required: [false, true],
-		_touched: [false, true],
-		_label: ['Label'],
+		label: 'Herr',
+		value: 'Herr',
 	},
-	getSelectHtml,
 	{
-		execMode: 'default', // ready
-		needTimers: true,
+		label: 'Divers',
+		value: 'Divers',
 	},
-);
+];
+
+executeInputSnapshotTests<SelectProps>(KolSelectTag, [KolSelect], {
+	_options: options,
+});
+
+executeInputSnapshotTests<SelectProps>(KolSelectTag, [KolSelect], {
+	_options: options,
+	_multiple: true,
+});
diff --git a/packages/components/src/components/single-select/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/single-select/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..70d27aac15
--- /dev/null
+++ b/packages/components/src/components/single-select/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,290 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _accessKey="V" 1`] = `
+<kol-single-select class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _accesskey="V" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          Label
+          <span aria-hidden="true" class="access-key-hint">
+            V
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input accesskey="V" aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _alert=true 1`] = `
+<kol-single-select _alert="" class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _disabled=true 1`] = `
+<kol-single-select class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="disabled single-select">
+      <kol-input _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" disabled="" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" disabled="" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _hint="Hint" 1`] = `
+<kol-single-select class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-single-select class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-single-select class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-single-select class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-single-select _hide-error="" class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-single-select class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _readOnly=true 1`] = `
+<kol-single-select _readonly="" class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] _touched=true 1`] = `
+<kol-single-select _touched="" class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _alert="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
+
+exports[`kol-single-select should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _options=[{"label":"Frau","value":"Frau","disabled":true},{"label":"Herr","value":"Herr"},{"label":"Divers","value":"Divers"}] 1`] = `
+<kol-single-select class="kol-single-select">
+  <template shadowrootmode="open">
+    <div class="single-select">
+      <kol-input _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" role="presentation">
+        <span slot="label">
+          <span>
+            Label
+          </span>
+        </span>
+        <div slot="input">
+          <div class="single-select__group">
+            <input aria-autocomplete="both" aria-controls="listbox" autocapitalize="off" autocorrect="off" class="single-select__input" name="field" placeholder="Hier steht ein Platzhaltertext" spellcheck="false" type="text" value="">
+            <button class="single-select__button" tabindex="-1">
+              <kol-icon _icons="codicon codicon-triangle-down" _label="kol-dropdown"></kol-icon>
+            </button>
+          </div>
+        </div>
+      </kol-input>
+    </div>
+  </template>
+</kol-single-select>
+`;
diff --git a/packages/components/src/components/single-select/test/snapshot.spec.tsx b/packages/components/src/components/single-select/test/snapshot.spec.tsx
new file mode 100644
index 0000000000..6e6c0d7775
--- /dev/null
+++ b/packages/components/src/components/single-select/test/snapshot.spec.tsx
@@ -0,0 +1,25 @@
+import { KolSingleSelectTag } from '../../../core/component-names';
+import type { SingleSelectProps } from '../../../schema';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
+import { KolSingleSelect } from '../shadow';
+
+const options = [
+	{
+		label: 'Frau',
+		value: 'Frau',
+		disabled: true,
+	},
+	{
+		label: 'Herr',
+		value: 'Herr',
+	},
+	{
+		label: 'Divers',
+		value: 'Divers',
+	},
+];
+
+executeInputSnapshotTests<SingleSelectProps>(KolSingleSelectTag, [KolSingleSelect], {
+	_options: options,
+});
diff --git a/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap
new file mode 100644
index 0000000000..600803c202
--- /dev/null
+++ b/packages/components/src/components/textarea/test/__snapshots__/snapshot.spec.tsx.snap
@@ -0,0 +1,194 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _accessKey="V" 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _accesskey="V" _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        Label
+        <span aria-hidden="true" class="access-key-hint">
+          V
+        </span>
+      </span>
+      <div slot="input"><textarea accesskey="V" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _alert=true 1`] = `
+<kol-textarea _alert="" class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _disabled=true 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _disabled="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" disabled="" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _hint="Hint" 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="Hint" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea aria-describedby="id-nonce-hint" autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"},"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _icons={"left":{"icon":"codicon codicon-arrow-left"}} 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _icons={"right":{"icon":"codicon codicon-arrow-right"}} 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} _hideError=true 1`] = `
+<kol-textarea _hide-error="" class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hideerror="" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _msg={"_type":"error","_description":"Es ist ein Fehler aufgetreten"} 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _readOnly=true 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _readonly="" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" readonly="" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" _touched=true 1`] = `
+<kol-textarea _touched="" class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _alert="" _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" _touched="" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
+
+exports[`kol-textarea should render with _label="Label" _name="field" _placeholder="Hier steht ein Platzhaltertext" _rows=5 _value="Value" 1`] = `
+<kol-textarea class="has-value kol-textarea">
+  <template shadowrootmode="open">
+    <kol-input _currentlength="5" _hint="" _id="id-nonce" _label="Label" _tooltipalign="top" class="textarea" role="presentation">
+      <span slot="label">
+        <span>
+          Label
+        </span>
+      </span>
+      <div slot="input"><textarea autocapitalize="off" autocorrect="off" id="id-nonce" name="field" placeholder="Hier steht ein Platzhaltertext" rows="5" spellcheck="false" value="Value" style="resize: vertical;"></textarea>
+      </div>
+    </kol-input>
+  </template>
+</kol-textarea>
+`;
diff --git a/packages/components/src/components/textarea/test/html.mock.ts b/packages/components/src/components/textarea/test/html.mock.ts
deleted file mode 100644
index b388ef1d5d..0000000000
--- a/packages/components/src/components/textarea/test/html.mock.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { mixMembers } from 'stencil-awesome-test';
-import { showExpertSlot } from '../../../schema';
-
-import type { TextareaProps, TextareaStates } from '../../../schema';
-import { getRenderStates } from '../../input/controller';
-import { nonce } from '../../../utils/dev.utils';
-import { KolInputTag } from '../../../core/component-names';
-
-export const getTextareaHtml = (props: TextareaProps): string => {
-	const state = mixMembers<TextareaProps, TextareaStates>(
-		{
-			_adjustHeight: false,
-			_currentLength: 0,
-			_hasValue: false,
-			_hideError: false,
-			_id: `id-${nonce()}`,
-			_label: '', // ⚠ required
-			_resize: 'vertical',
-		},
-		props,
-	);
-
-	const hasExpertSlot = showExpertSlot(props._label);
-	const { ariaDescribedBy } = getRenderStates(state);
-	return `
-<kol-textarea
-	${props._touched ? '_touched=""' : ''}
-	${state._alert ? `_alert=""` : ''}
-	class="${props._value ? 'has-value kol-textarea' : 'kol-textarea'}"
->
-  <mock:shadow-root>
-		<${KolInputTag}
-				_currentlength="${props._value ? `${props._value.length}` : '0'}"
-				${props._disabled ? ' _disabled=""' : ''}
-				_hint="${props._hint ? props._hint : ''}"
-				_id="id-nonce"
-				_label="${props._label ? props._label : ''}"
-				${props._touched ? '_touched=""' : ''}
-				${(state._alert === undefined && state._touched) || state._alert ? `_alert=""` : ''}
-				_tooltipalign="top"
-				class="textarea"
-				role="presentation"
-		>
-			<span slot="label">
-					${
-						hasExpertSlot || !props._label
-							? `<slot name="expert"></slot>`
-							: typeof props._accessKey === 'string'
-								? `<>
-											<InternalUnderlinedAccessKey accessKey=${props._accessKey} label=${props._label} />{' '}
-											<span class="access-key-hint" aria-hidden="true">
-											${props._accessKey}
-											</span>
-									</>`
-								: `<span>${props._label}</span>`
-					}
-			</span>
-			<div slot="input">
-				<textarea
-						autocapitalize="off"
-						autocorrect="off"
-						${props._disabled ? ' disabled=""' : ''}
-						id="id-nonce"
-						spellcheck="false"
-						${props._value ? `value="${props._value}"` : ''}
-						${props._placeholder ? `placeholder="${props._placeholder}"` : ''}
-						style="resize: vertical;"
-						${ariaDescribedBy.length > 0 ? `aria-describedby= "${ariaDescribedBy.join(' ')}"` : ''}
-				>
-				</textarea>
-			</div>
-		</${KolInputTag}>
-  </mock:shadow-root>
-</kol-textarea>`;
-};
diff --git a/packages/components/src/components/textarea/test/snapshot.spec.tsx b/packages/components/src/components/textarea/test/snapshot.spec.tsx
index b8f3154033..df4ac8c05a 100644
--- a/packages/components/src/components/textarea/test/snapshot.spec.tsx
+++ b/packages/components/src/components/textarea/test/snapshot.spec.tsx
@@ -1,36 +1,10 @@
-import { executeTests } from 'stencil-awesome-test';
-
-import { h } from '@stencil/core';
-import { newSpecPage } from '@stencil/core/testing';
-
-import { getTextareaHtml } from './html.mock';
-
+import { KolTextareaTag } from '../../../core/component-names';
 import type { TextareaProps } from '../../../schema';
-import type { SpecPage } from '@stencil/core/testing';
+import { executeInputSnapshotTests } from '../../../utils/testing';
+
 import { KolTextarea } from '../shadow';
 
-executeTests<TextareaProps>(
-	'Textarea',
-	async (props): Promise<SpecPage> => {
-		const page = await newSpecPage({
-			components: [KolTextarea],
-			template: () => <kol-textarea {...props} />,
-		});
-		return page;
-	},
-	{
-		_label: ['Texteingabe'],
-		_disabled: [true, false],
-		_rows: ['5'],
-		_msg: [{ _type: 'error', _description: 'Es ist ein Fehler aufgetreten' }],
-		_value: ['Kleiner Text im Eingabefeld'],
-		_placeholder: ['Hier steht ein Platzhaltertext'],
-		_hint: ['Hinweis'],
-		_touched: [true, false],
-	},
-	getTextareaHtml,
-	{
-		execMode: 'default', // ready
-		needTimers: true,
-	},
-);
+executeInputSnapshotTests<TextareaProps>(KolTextareaTag, [KolTextarea], {
+	_rows: 5,
+	_value: 'Value',
+});
diff --git a/packages/components/src/core/component-names.ts b/packages/components/src/core/component-names.ts
index 1cb84b8275..dc5cd9c017 100644
--- a/packages/components/src/core/component-names.ts
+++ b/packages/components/src/core/component-names.ts
@@ -46,6 +46,7 @@ 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 KolSingleSelectTag = 'kol-single-select' as const;
 export let KolSkipNavTag = 'kol-skip-nav' as const;
 export let KolSpanWcTag = 'kol-span-wc' as const;
 export let KolSpinTag = 'kol-spin' as const;
@@ -115,6 +116,7 @@ export const setCustomTagNames = (transformTagName: (tagName: string) => string)
 	KolProgressTag = transformTagName(KolProgressTag as string) as 'kol-progress';
 	KolQuoteTag = transformTagName(KolQuoteTag as string) as 'kol-quote';
 	KolSelectTag = transformTagName(KolSelectTag as string) as 'kol-select';
+	KolSingleSelectTag = transformTagName(KolSingleSelectTag as string) as 'kol-single-select';
 	KolSkipNavTag = transformTagName(KolSkipNavTag as string) as 'kol-skip-nav';
 	KolSpanWcTag = transformTagName(KolSpanWcTag as string) as 'kol-span-wc';
 	KolSpinTag = transformTagName(KolSpinTag as string) as 'kol-spin';
diff --git a/packages/components/src/utils/testing/index.ts b/packages/components/src/utils/testing/index.ts
index 5bb1bfc661..c03a9c5f44 100644
--- a/packages/components/src/utils/testing/index.ts
+++ b/packages/components/src/utils/testing/index.ts
@@ -1,2 +1,3 @@
 export * from './functional-component-rendering';
 export * from './snapshot-testing';
+export * from './snapshot-input-testing';
diff --git a/packages/components/src/utils/testing/snapshot-input-testing.tsx b/packages/components/src/utils/testing/snapshot-input-testing.tsx
new file mode 100644
index 0000000000..c7c5c37228
--- /dev/null
+++ b/packages/components/src/utils/testing/snapshot-input-testing.tsx
@@ -0,0 +1,68 @@
+import { executeSnapshotTests } from './snapshot-testing';
+
+export function executeInputSnapshotTests<Props extends Record<string, unknown>>(
+	ComponentName: string,
+	components: unknown[],
+	extendedProps?: Partial<Props>,
+	options: { hasSmartButton?: boolean } = {},
+) {
+	const baseObj: unknown = {
+		_label: 'Label',
+		_name: 'field',
+		_placeholder: 'Hier steht ein Platzhaltertext',
+
+		...(extendedProps || ({} as Props)),
+	};
+
+	const propVariants: Props[] = [
+		{ ...(baseObj as Props) },
+		{ ...(baseObj as Props), _accessKey: 'V' },
+		{ ...(baseObj as Props), _alert: true },
+		{ ...(baseObj as Props), _readOnly: true },
+		{ ...(baseObj as Props), _disabled: true },
+		{ ...(baseObj as Props), _msg: { _type: 'error', _description: 'Es ist ein Fehler aufgetreten' } },
+		{ ...(baseObj as Props), _msg: { _type: 'error', _description: 'Es ist ein Fehler aufgetreten' }, _hideError: true },
+		{ ...(baseObj as Props), _hint: 'Hint' },
+		{ ...(baseObj as Props), _touched: true },
+		{
+			...(baseObj as Props),
+			_icons: {
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+			},
+		},
+		{
+			...(baseObj as Props),
+			_icons: {
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			},
+		},
+		{
+			...(baseObj as Props),
+			_icons: {
+				left: {
+					icon: 'codicon codicon-arrow-left',
+				},
+				right: {
+					icon: 'codicon codicon-arrow-right',
+				},
+			},
+		},
+	];
+
+	if (options?.hasSmartButton) {
+		propVariants.push({
+			...(baseObj as Props),
+			_smartButton: {
+				_icons: ['codicon codicon-eye'],
+				_hideLabel: true,
+				_label: 'einblenden',
+			},
+		});
+	}
+
+	executeSnapshotTests<Props>(ComponentName, components, propVariants);
+}