Demo cleanup

Author: Templarian

src/pg/inputPixelEditor/__examples__/basic/basic.css

@@ -24,6 +24,14 @@ label {
 }
 
 h3 {
+  display: flex;
   margin: 0.25rem 0;
   font-size: 1.125rem;
+  align-items: center;
+}
+
+[part=addColor],
+[part=addLayer] {
+  vertical-align: middle;
+  margin-left: 0.5rem;
 }

src/pg/inputPixelEditor/__examples__/basic/basic.html

@@ -50,13 +50,11 @@ <h3>Drawing Tools</h3>
     <button part="modeStamp4" data-stamp="heart">Heart</button>
   </div>
   <div>
-    <h3>Color Tools</h3>
-    <button part="addColor">Add Color</button>
+    <h3>Color Tools <button part="addColor">Add Color</button></h3>
     <pg-table part="colors"></pg-table>
   </div>
   <div>
-    <h3>Layer Tools</h3>
-    <button part="addLayer">Add Layer</button>
+    <h3>Layer Tools <button part="addLayer">Add Layer</button></h3>
     <pg-table part="layers"></table>
   </div>
   <div>

src/pg/inputPixelEditor/__examples__/basic/basic.ts

@@ -151,6 +151,9 @@ export default class XPgInputPixelEditorBasic extends HTMLElement {
     }, {
       label: 'Type',
       key: 'type',
+    }, {
+      label: 'Selected',
+      key: 'selected',
     }];
     this.$addLayer.addEventListener('click', () => {
       // number[][][]