Merge pull request #94 from Tresjs/test/update-snapshots

test(snapshots): update snapshots

Author: alvarosabu

src/components/__snapshots__/BooleanControl.test.ts.snap

@@ -8,7 +8,9 @@ exports[`Boolean Control > should render a boolean control 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-flex tl-px-4 tl-justify-start tl-gap-2 tl-items-center tl-mb-2 tl-min-h-32px\\"><label class=\\"tl-text-gray-500 tl-w-1/3\\">test</label><input id=\\"test\\" class=\\"tl-hidden\\" type=\\"checkbox\\"><label for=\\"test\\" class=\\"tl-inline-flex tl-items-center tl-cursor-pointer\\"><span tabindex=\\"0\\" role=\\"checkbox\\" aria-checked=\\"true\\" class=\\"tl-bg-dark-500 tl-w-4 tl-h-4 tl-flex tl-justify-center tl-items-center tl-rounded tl-border tl-border-gray-300 tl-mr-2 tl-transition-colors tl-duration-200\\"><i class=\\"i-ic:baseline-check tl-text-light\\"></i></span></label></div>
+    <div>
+      <div class=\\"tl-flex tl-px-4 tl-justify-start tl-gap-2 tl-items-center tl-mb-2 tl-min-h-32px\\"><label class=\\"tl-text-gray-500 tl-w-1/3\\">test</label><input id=\\"test\\" class=\\"tl-hidden\\" type=\\"checkbox\\"><label for=\\"test\\" class=\\"tl-inline-flex tl-items-center tl-cursor-pointer\\"><span tabindex=\\"0\\" role=\\"checkbox\\" aria-checked=\\"true\\" class=\\"tl-bg-dark-500 tl-w-4 tl-h-4 tl-flex tl-justify-center tl-items-center tl-rounded tl-border tl-border-gray-300 tl-mr-2 tl-transition-colors tl-duration-200\\"><i class=\\"i-ic:baseline-check tl-text-light\\"></i></span></label></div>
+    </div>
   </div>
 </div>"
 `;
@@ -21,7 +23,9 @@ exports[`Boolean Control > should render a boolean control with a label 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-flex tl-px-4 tl-justify-start tl-gap-2 tl-items-center tl-mb-2 tl-min-h-32px\\"><label class=\\"tl-text-gray-500 tl-w-1/3\\">test</label><input id=\\"test\\" class=\\"tl-hidden\\" type=\\"checkbox\\"><label for=\\"test\\" class=\\"tl-inline-flex tl-items-center tl-cursor-pointer\\"><span tabindex=\\"0\\" role=\\"checkbox\\" aria-checked=\\"true\\" class=\\"tl-bg-dark-500 tl-w-4 tl-h-4 tl-flex tl-justify-center tl-items-center tl-rounded tl-border tl-border-gray-300 tl-mr-2 tl-transition-colors tl-duration-200\\"><i class=\\"i-ic:baseline-check tl-text-light\\"></i></span></label></div>
+    <div>
+      <div class=\\"tl-flex tl-px-4 tl-justify-start tl-gap-2 tl-items-center tl-mb-2 tl-min-h-32px\\"><label class=\\"tl-text-gray-500 tl-w-1/3\\">test</label><input id=\\"test\\" class=\\"tl-hidden\\" type=\\"checkbox\\"><label for=\\"test\\" class=\\"tl-inline-flex tl-items-center tl-cursor-pointer\\"><span tabindex=\\"0\\" role=\\"checkbox\\" aria-checked=\\"true\\" class=\\"tl-bg-dark-500 tl-w-4 tl-h-4 tl-flex tl-justify-center tl-items-center tl-rounded tl-border tl-border-gray-300 tl-mr-2 tl-transition-colors tl-duration-200\\"><i class=\\"i-ic:baseline-check tl-text-light\\"></i></span></label></div>
+    </div>
   </div>
 </div>"
 `;

src/components/__snapshots__/ButtonControl.test.ts.snap

@@ -8,7 +8,9 @@ exports[`Button Controls > should render a block size button 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-block\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    <div>
+      <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-block\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    </div>
   </div>
 </div>"
 `;
@@ -21,7 +23,9 @@ exports[`Button Controls > should render a button 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    <div>
+      <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    </div>
   </div>
 </div>"
 `;
@@ -34,7 +38,9 @@ exports[`Button Controls > should render a button with a label 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    <div>
+      <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    </div>
   </div>
 </div>"
 `;
@@ -47,7 +53,9 @@ exports[`Button Controls > should render a large button 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-lg\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    <div>
+      <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-lg\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    </div>
   </div>
 </div>"
 `;
@@ -60,7 +68,9 @@ exports[`Button Controls > should render a primary button variant by default 1`]
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    <div>
+      <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    </div>
   </div>
 </div>"
 `;
@@ -73,7 +83,9 @@ exports[`Button Controls > should render a secondary button variant 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-secondary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    <div>
+      <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-secondary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    </div>
   </div>
 </div>"
 `;
@@ -86,7 +98,9 @@ exports[`Button Controls > should render a small button 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    <div>
+      <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"mr-1\\"></i> Accept</button></div>
+    </div>
   </div>
 </div>"
 `;
@@ -99,7 +113,9 @@ exports[`Button Controls > should render an icon on the button 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"i-carbon-checkmark mr-1\\"></i> Accept</button></div>
+    <div>
+      <div class=\\"tl-p-2 tl-inline-flex\\"><button data-v-9a5f9367=\\"\\" class=\\"leches-btn leches-btn-primary leches-btn-sm\\"><i data-v-9a5f9367=\\"\\" class=\\"i-carbon-checkmark mr-1\\"></i> Accept</button></div>
+    </div>
   </div>
 </div>"
 `;

src/components/__snapshots__/ColorControl.test.ts.snap

@@ -8,7 +8,9 @@ exports[`Color Control > should render a color control 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2\\"><label class=\\"tl-text-gray-500 tl-w-1/3\\">colorValue</label><input id=\\"colorValue\\" tabindex=\\"0\\" aria-label=\\"colorValue\\" class=\\"focus:tl-outline-none focus:tl-ring-2 focus:tl-ring-blue-600\\" type=\\"color\\"><input id=\\"colorValue\\" tabindex=\\"0\\" aria-label=\\"colorValue\\" class=\\"tl-p-2 tl-w-2/3 tl-rounded tl-text-right tl-text-xs tl-text-gray-400 tl-bg-gray-100 tl-border-none tl-font-sans\\" type=\\"text\\"></div>
+    <div>
+      <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2\\"><label class=\\"tl-text-gray-500 tl-w-1/3\\">colorValue</label><input id=\\"colorValue\\" tabindex=\\"0\\" aria-label=\\"colorValue\\" class=\\"focus:tl-outline-none focus:tl-ring-2 focus:tl-ring-blue-600\\" type=\\"color\\"><input id=\\"colorValue\\" tabindex=\\"0\\" aria-label=\\"colorValue\\" class=\\"tl-p-2 tl-w-2/3 tl-rounded tl-text-right tl-text-xs tl-text-gray-400 tl-bg-gray-100 tl-border-none tl-font-sans\\" type=\\"text\\"></div>
+    </div>
   </div>
 </div>"
 `;

src/components/__snapshots__/Folder.test.ts.snap

@@ -10,11 +10,13 @@ exports[`Folder Controls > should render controls within a folder 1`] = `
     <div class=\\"tl-mb-4\\"><button class=\\"tl-flex tl-items-center tl-justify-between tl-w-full tl-py-2 tl-px-4 tl-bg-gray-100 tl-border-none tl-text-gray-400 tl-font-bold tl-text-xs tl-font-sans tl-cursor-pointer\\" aria-expanded=\\"false\\" aria-haspopup=\\"true\\" role=\\"button\\" data-folder=\\"camera\\" tabindex=\\"0\\"><span>camera</span><i class=\\"i-ic:baseline-keyboard-arrow-down\\"></i></button>
       <transition-stub name=\\"slide\\" enteractiveclass=\\"tl-animate-fade-in tl-animate-duration-200 tl-animate-ease-in-out\\" leaveactiveclass=\\"tl-animate-fade-out tl-animate-duration-200 tl-animate-ease-in-out\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
         <div class=\\"tl-bg-white tl-rounded-b tl-pt-4\\" role=\\"menu\\" style=\\"display: none;\\">
-          <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-1 tl-items-center tl-mb-2\\"><label for=\\"cameraPosition\\" title=\\"position\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">position</label>
-            <div class=\\"tl-relative tl-w-2/3 tl-flex tl-justify-between tl-gap-0.5\\">
-              <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">x</span><input id=\\"cameraPosition-x\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
-              <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">y</span><input id=\\"cameraPosition-y\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
-              <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">z</span><input id=\\"cameraPosition-z\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
+          <div role=\\"menuitem\\">
+            <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-1 tl-items-center tl-mb-2\\"><label for=\\"cameraPosition\\" title=\\"position\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">position</label>
+              <div class=\\"tl-relative tl-w-2/3 tl-flex tl-justify-between tl-gap-0.5\\">
+                <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">x</span><input id=\\"cameraPosition-x\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
+                <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">y</span><input id=\\"cameraPosition-y\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
+                <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">z</span><input id=\\"cameraPosition-z\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
+              </div>
             </div>
           </div>
         </div>

src/components/__snapshots__/NumberControl.test.ts.snap

@@ -8,7 +8,9 @@ exports[`Number Control > should render a number control 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2\\"><label for=\\"numberValue\\" title=\\"numberValue\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">numberValue</label><input id=\\"numberValue\\" class=\\"tl-p-2 tl-w-1/3 tl-rounded tl-text-right tl-text-xs tl-text-gray-400 tl-bg-gray-100 tl-focus:border-gray-200 tl-outline-none tl-border-none tl-font-sans\\" type=\\"number\\"></div>
+    <div>
+      <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2\\"><label for=\\"numberValue\\" title=\\"numberValue\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">numberValue</label><input id=\\"numberValue\\" class=\\"tl-p-2 tl-w-1/3 tl-rounded tl-text-right tl-text-xs tl-text-gray-400 tl-bg-gray-100 tl-focus:border-gray-200 tl-outline-none tl-border-none tl-font-sans\\" type=\\"number\\"></div>
+    </div>
   </div>
 </div>"
 `;

src/components/__snapshots__/SelectControl.test.ts.snap

@@ -8,11 +8,13 @@ exports[`Dropdown Control > should render a select control 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px\\"><label for=\\"game\\" title=\\"Games\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">Games</label><select id=\\"game\\" class=\\"tl-p-2 tl-w-2/3 tl-rounded tl-text-left tl-text-xs tl-text-gray-400 tl-bg-gray-100 focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans\\">
-        <option value=\\"crash-bandicoot\\">Crash Bandicoot</option>
-        <option value=\\"spyro-the-dragon\\">Spyro The Dragon</option>
-        <option value=\\"metal-gear-solid\\">Metal Gear Solid</option>
-      </select></div>
+    <div>
+      <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px\\"><label for=\\"game\\" title=\\"Games\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">Games</label><select id=\\"game\\" class=\\"tl-p-2 tl-w-2/3 tl-rounded tl-text-left tl-text-xs tl-text-gray-400 tl-bg-gray-100 focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans\\">
+          <option value=\\"crash-bandicoot\\">Crash Bandicoot</option>
+          <option value=\\"spyro-the-dragon\\">Spyro The Dragon</option>
+          <option value=\\"metal-gear-solid\\">Metal Gear Solid</option>
+        </select></div>
+    </div>
   </div>
 </div>"
 `;

src/components/__snapshots__/TextControl.test.ts.snap

@@ -8,7 +8,9 @@ exports[`Text Control > should render a text control 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px\\"><label for=\\"textValue\\" title=\\"textValue\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">textValue</label><input id=\\"textValue\\" type=\\"text\\" tabindex=\\"0\\" class=\\"tl-p-2 tl-w-2/3 tl-rounded tl-text-right tl-text-xs tl-text-gray-400 tl-bg-gray-100 focus:tl-border-gray-200 tl-border-none tl-font-sans\\" aria-label=\\"textValue\\" placeholder=\\"Enter value here...\\"></div>
+    <div>
+      <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-4 tl-items-center tl-mb-2 tl-min-h-32px\\"><label for=\\"textValue\\" title=\\"textValue\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">textValue</label><input id=\\"textValue\\" type=\\"text\\" tabindex=\\"0\\" class=\\"tl-p-2 tl-w-2/3 tl-rounded tl-text-right tl-text-xs tl-text-gray-400 tl-bg-gray-100 focus:tl-border-gray-200 tl-border-none tl-font-sans\\" aria-label=\\"textValue\\" placeholder=\\"Enter value here...\\"></div>
+    </div>
   </div>
 </div>"
 `;

src/components/__snapshots__/VectorControl.test.ts.snap

@@ -8,11 +8,13 @@ exports[`Vector Control > should render multiple numeric inputs 1`] = `
       <div></div>
     </header>
     <!--v-if-->
-    <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-1 tl-items-center tl-mb-2\\"><label for=\\"position\\" title=\\"position\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">position</label>
-      <div class=\\"tl-relative tl-w-2/3 tl-flex tl-justify-between tl-gap-0.5\\">
-        <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">x</span><input id=\\"position-x\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
-        <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">y</span><input id=\\"position-y\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
-        <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">z</span><input id=\\"position-z\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
+    <div>
+      <div class=\\"tl-flex tl-px-4 tl-justify-between tl-gap-1 tl-items-center tl-mb-2\\"><label for=\\"position\\" title=\\"position\\" class=\\"tl-text-gray-500 tl-w-1/3 tl-truncate\\">position</label>
+        <div class=\\"tl-relative tl-w-2/3 tl-flex tl-justify-between tl-gap-0.5\\">
+          <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">x</span><input id=\\"position-x\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
+          <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">y</span><input id=\\"position-y\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
+          <div class=\\"tl-flex tl-items-center tl-bg-gray-100 tl-rounded tl-w-1/3 tl-w-1/2\\"><span class=\\"tl-font-bold tl-px-1 tl-py-1 tl-text-0.65rem tl-text-gray-300\\">z</span><input id=\\"position-z\\" type=\\"number\\" step=\\"1\\" class=\\"tl-w-full tl-px-0 tl-p-1 tl-text-right tl-text-0.65rem tl-text-gray-400 tl-bg-transparent focus:tl-border-gray-200 tl-outline-none tl-border-none tl-font-sans tl-appearence-none\\"></div>
+        </div>
       </div>
     </div>
   </div>