Update tree1 component and test.html

Author: nuxodin

tests/test.html

@@ -75,7 +75,24 @@
             </u1-tree1>
             <u1-tree1 draggable="true">
                 <u1-ico slot=icon icon=drag_indicator>x</u1-ico>
-                Draggable
+                <label>
+                    Draggable
+                    <input placeholder="same baseline">
+                </label>
+                <button>clickable</button>
+            </u1-tree1>
+
+            <u1-tree1>
+                <input type=checkbox slot=icon id="check1">
+                Checkbox
+                <u1-tree1>
+                    <input type=checkbox slot=icon id="check2">
+                    Checkbox
+                </u1-tree1>
+                <u1-tree1>
+                    <input type=checkbox slot=icon id="check3">
+                    Checkbox
+                </u1-tree1>
             </u1-tree1>
 
         </u1-tree1>
@@ -88,7 +105,7 @@
 
 <section>
 
-    <u1-code element=demo editable trim></u1-code>
+    <u1-code element=demo editable trim> </u1-code>
 
     <u1-code trim editable>
     <style>
@@ -105,6 +122,11 @@
     u1-tree1::part(row):hover {
         background:#00000004;
     }
+    u1-tree1[aria-grabbed=true] {
+        transition:.2s .2s;
+        opacity:.4;
+        outline-width:0 !important;
+    }
     </style>
     </u1-code>
 
@@ -138,8 +160,6 @@
 
 
 
-
-
 <script type=module>
 /* drag & drop experiment */
 
@@ -167,7 +187,8 @@
     ondragstart({target, event}) {
         if (target.tagName !== 'U1-TREE1') return;
         dragSrcEl = target;
-        event.dataTransfer.effectAllowed = 'move';
+        dragSrcEl.setAttribute('aria-grabbed', 'true'); // deprecated, but currently the best markup?
+        event.dataTransfer.effectAllowed = 'move'; // needed?
     },
     ondragover({closest, event}) {
         event.preventDefault();
@@ -221,6 +242,7 @@
     },
     ondragend() {
         dropPositionIndicator.style.display = 'none';
+        dragSrcEl.removeAttribute('aria-grabbed');
         dragSrcEl = null;
     },
     resetExpandTimer(item) {

tree1.css

@@ -10,13 +10,17 @@ u1-tree1::part(row):focus {
 u1-tree1[aria-selected=true]::part(row) {
     background:#00000008;
 }
+u1-tree1[draggable]::part(row) {
+    cursor:grab;
+}
 
 
 u1-tree1:not(:defined) {
-    padding:.2em 0 0 0;
+    padding-block-start:.2em;
     display:list-item;
     list-style-position: inside;
     > u1-tree1 {
-        padding-left:1.2em;
+        padding-inline-start:1.2em;
+
     }
 }

tree1.js

@@ -22,8 +22,9 @@ let css = `
 
 [part=row] {
     display:flex;
-    padding:.15em 0;
-    padding-left:calc( var(--indent) * (var(--level) - 1) );
+    align-items:baseline;
+    padding-block: .15em;
+    padding-inline-start:calc( var(--indent) * (var(--level) - 1) );
     gap:.3em;
 }
 
@@ -40,8 +41,9 @@ let css = `
     display:flex;
     align-items: center;
     justify-content:center;
-    min-width:1.7em;
+    min-inline-size:1.7em;
     font-weight:400;
+    align-self:stretch;
 }
 `;
 
@@ -113,15 +115,21 @@ export class tree extends HTMLElement {
     }
     _markup(){
         // own level
-        const myLevel = this.root() === this ? 1 : parseInt(this.parentNode.getAttribute('aria-level')) + 1;
+        const root = this.root();
+        const myLevel = root === this ? 1 : parseInt(this.parentNode.getAttribute('aria-level')) + 1;
         this.setAttribute('aria-level', myLevel);
         this.style.setProperty('--level', myLevel);
 
         // slot subnodes
         for (const child of this.children) {
             child.tagName === this.tagName && child.setAttribute('slot', 'children');
         }
-        this.setAttribute('role', this.root() === this ? 'tree' : 'treeitem');
+        this.setAttribute('role', root === this ? 'tree' : 'treeitem');
+
+        // make it selectable if its the root and no other is selected
+        if (root === this && !root._activeElement) {
+            this.row.setAttribute('tabindex', '0');
+        }
 
         // if has children, its expandable
         if (!this.hasAttribute('aria-expanded')) {
@@ -142,7 +150,7 @@ export class tree extends HTMLElement {
             if (item.isExpanded()) {
                 next = item.items().at(0);
             }
-            if (!next) next = item.nextElementSibling;
+            if (!next) next = item.nextElementSibling; // todo: only next treeitem
 
             if (!next) {
                 while (item.parentNode) {
@@ -162,7 +170,7 @@ export class tree extends HTMLElement {
     prevFocusable(){
         let item = this;
         while (item) {
-            let next = item.previousElementSibling;
+            let next = item.previousElementSibling; // todo: only next treeitem
             if (next) {
                 if (next.isExpanded()) {
                     next = next.items().at(-1);